vue+oss+element上傳拿走不謝

爲了前端小夥伴少走一些彎路

最近公司業務有使用oss的業務 以下代碼是基於oss 進行封裝的代碼

const OSS = require('ali-oss')
//     'aliyun_oss_bucket'=>"mrstatic"
export const uploadOss = function (file, onprogress) {
  return new UploadFile(file, onprogress)
}
class UploadFile {
   config = {
     region: 'oss-cn-beijing', // your region
     accessKeyId: '', // your accessKeyId
     accessKeySecret: '', // accessKeySecret
     bucket: '' // 
   }
   tempCheckpoint = null
   client = null
   resumeclient = null
   onprogress = null
   file = null
   objectkey = null
   constructor (file, onprogress) {
     //  super(this)
     this.file = file
     onprogress && (this.onprogress = onprogress)
     this.client = new OSS(this.config)
     this.resumeclient = new OSS(this.config)
     this.objectkey = new Date().getTime() + file.name
   }
   upload () {
     const _this = this
     console.log('upload')
     return new Promise(async function (resolve, reject) {
       try {
         let result = await _this.client.multipartUpload(_this.objectkey, _this.file, {
           progress: async function (p, checkpoint) {
             console.log('checkpoint', checkpoint)
             // 斷點記錄點。 瀏覽器重啓後無法直接繼續上傳，需用戶手動觸發進行設置。
             if (checkpoint) {
               _this.onprogress({
                 percent: checkpoint.partSize / checkpoint.fileSize
               })
             }
             _this.tempCheckpoint = checkpoint
           },

           meta: { year: 2019, people: 'test' },
           mime: 'video/mp4'
         })
         _this.onprogress({
           percent: 100
         })
         console.log(result)
         resolve(result)
       } catch (e) {
         reject(e)
         console.log(e)
       }
     })
   }
   resumeUpload () {
     const _this = this
     return new Promise(async function (resolve, reject) {
       try {
         let result = await _this.resumeclient.multipartUpload(_this.objectkey, _this.file, {
           progress: async function (p, checkpoint) {
             // 斷點記錄點。 瀏覽器重啓後無法直接繼續上傳，需用戶手動觸發進行設置。
             if (checkpoint) {
               _this.onprogress({
                 percent: checkpoint.partSize / checkpoint.fileSize
               })
             }
             _this.tempCheckpoint = checkpoint
           },
           checkpoint: _this.tempCheckpoint,
           meta: { year: 2019, people: 'hanjixin' },
           mime: 'video/mp4'
         })
         _this.onprogress({
           percent: 100
         })
         resolve(result)
       } catch (e) {
         reject(e)
         console.log(e)
       }
     })
   }
   cancel () {
     this.client.cancel()
     this.resumeclient.cancel()
   }
}

element 上傳部分

我看了一下官網只提供了http-request （覆蓋默認的上傳行爲，可以自定義上傳的實現 ）
但是沒有過多的詳細介紹

• k看了一下源碼arguments 只返回了 下面的對象

	const options = {
        headers: this.headers,
        withCredentials: this.withCredentials,
        file: rawFile,
        data: this.data,
        filename: this.name,
        action: this.action,
        onProgress: e => {
          this.onProgress(e, rawFile);
        },
        onSuccess: res => {
          this.onSuccess(res, rawFile);
          delete this.reqs[uid];
        },
        onError: err => {
          this.onError(err, rawFile);
          delete this.reqs[uid];
        }
      };

• 裏面繼續看 e 需要傳一個對象

	file.percentage = ev.percent || 0;
	// ev 就是 e 這個對象
	// { percent: number }

所以e 要穿的對象必須包含 percent 屬性