基於vue-simple-uploader封裝文件分片上傳、秒傳及斷點續傳的全局上傳插件功能

import uploader from 'vue-simple-uploader'
Vue.use(uploader)

<template>
 <div id="global-uploader">

 <!-- 上傳 -->
 <uploader
  ref="uploader"
  :options="options"
  :autoStart="false"
  @file-added="onFileAdded"
  @file-success="onFileSuccess"
  @file-progress="onFileProgress"
  @file-error="onFileError"
  class="uploader-app">
  <uploader-unsupport></uploader-unsupport>

  <uploader-btn id="global-uploader-btn" :attrs="attrs" ref="uploadBtn">選擇文件</uploader-btn>

  <uploader-list v-show="panelShow">
  <div class="file-panel" slot-scope="props" :class="{'collapse': collapse}">
   <div class="file-title">
   <h2>文件列表</h2>
   <div class="operate">
    <el-button @click="fileListShow" type="text" :title="collapse ? '展開':'折疊' ">
    <i class="iconfont" :class="collapse ? 'icon-fullscreen': 'icon-minus-round'"></i>
    </el-button>
    <el-button @click="close" type="text" title="關閉">
    <i class="iconfont icon-close"></i>
    </el-button>
   </div>
   </div>

   <ul class="file-list">
   <li v-for="file in props.fileList" :key="file.id">
    <uploader-file :class="'file_' + file.id" ref="files" :file="file" :list="true"></uploader-file>
   </li>
   <div class="no-file" v-if="!props.fileList.length"><i class="nucfont inuc-empty-file"></i> 暫無待上傳文件</div>
   </ul>
  </div>
  </uploader-list>

 </uploader>

 </div>
</template>

data() {
 return {
 options: {
  target: 'http://xxxxx/xx', // 目標上傳 URL
  chunkSize: '2048000', //分塊大小
  fileParameterName: 'file', //上傳文件時文件的參數名，默認file
  maxChunkRetries: 3, //最大自動失敗重試上傳次數
  testChunks: true, //是否開啟服務器分片校驗
  // 服務器分片校驗函數，秒傳及斷點續傳基礎
  checkChunkUploadedByResponse: function (chunk, message) {
  let objMessage = JSON.parse(message);
  if (objMessage.skipUpload) {
   return true;
  }

  return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0
  },
  headers: {
  // 在header中添加的驗證，請根據實際業務來
  Authorization: "Bearer " + Ticket.get().access_token
  },
 },
 attrs: {
  // 接受的文件類型，形如['.png', '.jpg', '.jpeg', '.gif', '.bmp'...] 這裡我封裝瞭一下
  accept: ACCEPT_CONFIG.getAll()
 },
 panelShow: false, //選擇文件後，展示上傳panel
 }
},

<global-uploader></global-uploader>

Bus.$emit('openUploader', {
 superiorID: this.superiorID
})

Bus.$on('openUploader', query => {
 this.params = query || {};

 if (this.$refs.uploadBtn) {
	 // 這樣就打開瞭選擇文件的操作窗口
 $('#global-uploader-btn').click();
 }
});

onFileAdded(file) {
 this.panelShow = true;
	
	// 計算MD5，下文會提到
 this.computeMD5(file);
},

// 文件進度的回調
onFileProgress(rootFile, file, chunk) {
 console.log(`上傳中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
},

onFileSuccess(rootFile, file, response, chunk) {
 let res = JSON.parse(response);

 // 服務器自定義的錯誤，這種錯誤是Uploader無法攔截的
 if (!res.result) {
 this.$message({ message: res.message, type: 'error' });
 return
 }
	
	// 如果服務端返回需要合並
 if (res.needMerge) {
 api.mergeSimpleUpload({
  tempName: res.tempName,
  fileName: file.name,
  ...this.params,
 }).then(data => {
  // 文件合並成功
  Bus.$emit('fileSuccess', data);
 }).catch(e => {});
 // 不需要合並 
 } else {
 Bus.$emit('fileSuccess', res);
 console.log('上傳成功');
 }
},

onFileError(rootFile, file, response, chunk) {
	console.log(error)
},

/**
* 計算md5，實現斷點續傳及秒傳
* @param file
*/
/**
* 計算md5，實現斷點續傳及秒傳
* @param file
*/
 computeMD5(file) {
 let fileReader = new FileReader();
 let time = new Date().getTime();
 let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
 let currentChunk = 0;
 const chunkSize = 10 * 1024 * 1000;
 let chunks = Math.ceil(file.size / chunkSize);
 let spark = new SparkMD5.ArrayBuffer();
 
 // 文件狀態設為"計算MD5"
 this.statusSet(file.id, 'md5');
 
 file.pause();
 
 loadNext();
 
 fileReader.onload = (e => {
 spark.append(e.target.result);
 if (currentChunk < chunks) {
  currentChunk++;
  loadNext();
  // 實時展示MD5的計算進度
  this.$nextTick(() => {
  $(`.myStatus_${file.id}`).text('校驗MD5 '+ ((currentChunk/chunks)*100).toFixed(0)+'%')
  })
 } else {
  let md5 = spark.end();
  this.computeMD5Success(md5, file);
  console.log(`MD5計算完畢：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${file.size} 用時：${new Date().getTime() - time} ms`);
 }
 });
 fileReader.onerror = function () {
 this.error(`文件${file.name}讀取出錯，請檢查該文件`)
 file.cancel();
 };
 function loadNext() {
 let start = currentChunk * chunkSize;
 let end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
 fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
 }
},

computeMD5Success(md5, file) {
 // 將自定義參數直接加載uploader實例的opts上
 Object.assign(this.uploader.opts, {
 query: {
  ...this.params,
 }
 })
 file.uniqueIdentifier = md5;
 file.resume();
 this.statusRemove(file.id);
},

checkChunkUploadedByResponse: function (chunk, message) {
	 let objMessage = JSON.parse(message);
 if (objMessage.skipUpload) {
  return true;
 }

 return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0
},

this.statusSet(file.id, 'merging');
this.statusRemove(file.id);