您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“Vue Element UI + OSS怎么實(shí)現(xiàn)上傳文件功能”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue Element UI + OSS怎么實(shí)現(xiàn)上傳文件功能”這篇文章吧。
Element提供了upload上傳組件,可以查看官網(wǎng)upload組件的詳細(xì)介紹;查看upload組件的上傳源碼upload/ajax,使用的是XHR對象上傳文件。在項(xiàng)目實(shí)踐中,發(fā)現(xiàn)該上傳方法上傳大文件時會出現(xiàn)問題,所以決定使用阿里云對象存儲服務(wù)(Object Storage Service,簡稱OSS),OSS詳細(xì)介紹可以查看官網(wǎng),本文主要講解的是OSS上傳文件的前端,后臺開發(fā)請查看官網(wǎng)介紹,SDK Browser.js講解了前端如何進(jìn)行上傳。
1、使用npm安裝SDK的開發(fā)包:
npm install ali-oss
2、OSS配置
let OSS = require('ali-oss'); let client= new OSS.Wrapper({ accessKeyId: 'your access key', accessKeySecret: 'your access secret', bucket: 'your bucket name', region: 'oss-cn-hangzhou' });
最新版的沒有了Wrapper構(gòu)造函數(shù),直接配置
let oss = require('ali-oss'); var client = oss({ accessKeyId: 'your access key', accessKeySecret: 'your access secret', bucket: 'your bucket name', region: 'oss-cn-hangzhou' });
3、上傳文件
OSS上傳文件分為上傳Buffer內(nèi)容、上傳blob數(shù)據(jù)、分片上傳,此處展示分片上傳
let result = await client.multipartUpload('object-key', 'local-file', { progress: async function (p) { console.log('Progress: ' + p); } });
js調(diào)用OSS上傳文件已經(jīng)沒有問題,但是我們需要實(shí)現(xiàn)公用上傳組件,Element UI已經(jīng)實(shí)現(xiàn)了Upload上傳組件,包括上傳進(jìn)度、異常處理、拖拽等;那我們還有必要重新開發(fā)一個像Upload一樣的組件嗎?通過查看Upload組件的API發(fā)現(xiàn)有一個http-request屬性,http-request覆蓋默認(rèn)的上傳行為,可以自定義上傳的實(shí)現(xiàn);看到這個我就省了很多事,直接用OSS上傳覆蓋XHR上傳。代碼如下:
<template> <div> <el-upload :auto-upload="false" :action="uploadUrl" ref="upload" :before-upload="fnBeforeUpload" :on-success="fnUploadSuccess" :on-exceed="fnUploadExceed" :data="data_extra" :headers="uploadHeaders" :http-request="fnUploadRequest" drag :limit="files" :disabled="disabled" multiple> <i class="el-icon-upload"></i> <div class="el-upload__text">將文件拖到此處,或<em>點(diǎn)擊上傳</em></div> <div slot="tip" class="el-upload__tip">上傳文件大小不能超過 1G</div> </el-upload> </div> </template> <script> import UploadFileApi from '@/api/system/UploadFileApi' import * as util from 'utils/common' import OSS from 'ali-oss' export default { name: 'fileUpload', props: { data_extra: { type: Object, required: true }, accept: { type: Array, required: true } }, data () { return { uploadUrl: '', uploadFileLength: 0, uploadFileSuccess: 0, uploadFileNames: [], uploadFileName: [], fileList: [], files: 10, uploadHeaders: { authorization: '' }, disabled: false } }, methods: { /** * @description [fnUploadRequest 覆蓋默認(rèn)的上傳行為,實(shí)現(xiàn)自定義上傳] * @author shanshuizinong * @param {object} option [上傳選項(xiàng)] * @return {null} [沒有返回] */ async fnUploadRequest (option) { try { let vm = this vm.disabled = true // 獲取OSS配置信息 let uploadFileApi = new UploadFileApi() let ret = await uploadFileApi.fileOssParams() if (!(ret.data && ret.data.code === '0' && ret.data.data)) { throw new Error('獲取OSS參數(shù)失敗') } let ossData = JSON.parse(ret.data.data) let relativePath = ossData.relativePath let client = new OSS.Wrapper({ policy: ossData.policy, accessKeyId: ossData.accessid, accessKeySecret: ossData.accesssecret, bucket: ossData.bucket, signature: ossData.signature }) let file = option.file const point = file.name.lastIndexOf('.') let suffix = file.name.substr(point) let fileName = file.name.substr(0, point) let date = vm.$moment().format('YYYYMMDDHHmm') let fileNames = `${fileName}_${date}${suffix}` // 分片上傳文件 ret = await client.multipartUpload(relativePath + fileNames, file, { progress: async function (p) { let e = {} e.percent = p * 100 option.onProgress(e) } }) console.log(ret) if (ret.res.statusCode === 200) { // option.onSuccess(ret) return ret } else { vm.disabled = false option.onError('上傳失敗') } } catch (error) { console.error(error) this.disabled = false option.onError('上傳失敗') this.$error(error.message) } }, /** * @description [fnUploadSuccess 文件上傳成功的函數(shù)] * @author shanshuizinong * @return {null} [沒有返回] */ async fnUploadSuccess () { // TODO } } } </script>
查看upload源碼upload.vue知道httpRequest會有一個文件上傳的option選項(xiàng)作為參數(shù),upload/ajax源碼中上傳進(jìn)度、上傳成功、上傳失敗都是通過option調(diào)用其方法進(jìn)行觸發(fā)。
以上是“Vue Element UI + OSS怎么實(shí)現(xiàn)上傳文件功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。