1. 前言

之前公司要在管理系統(tǒng)中做一個(gè)全局上傳插件，即切換各個(gè)頁(yè)面的時(shí)候，上傳界面還在并且上傳不會(huì)受到影響，這在vue這種spa框架面前并不是什么難題。然而后端大佬說(shuō)我們要實(shí)現(xiàn)分片上傳、秒傳以及斷點(diǎn)續(xù)傳的功能，聽(tīng)起來(lái)頭都大了。

很久之前我寫(xiě)了一篇webuploader的文章，結(jié)果使用起來(lái)發(fā)現(xiàn)問(wèn)題很多，且官方團(tuán)隊(duì)不再維護(hù)這個(gè)插件了， 經(jīng)過(guò)多天調(diào)研及踩雷，最終決定基于vue-simple-uploader插件實(shí)現(xiàn)該功能，在項(xiàng)目中使用起來(lái)無(wú)痛且穩(wěn)定。

如果你只是想實(shí)現(xiàn)基本的（非定制化的）上傳功能，直接使用vue-simple-uploader，多讀一下它的文檔，不需要更多的二次封裝。
如果你只是想實(shí)現(xiàn)全局上傳插件，也可以參照一下我的實(shí)現(xiàn)。
如果你用到了分片上傳、秒傳及斷點(diǎn)續(xù)傳這些復(fù)雜的功能，恭喜你，這篇文章的重點(diǎn)就在于此。

本文源碼在此：https://github.com/shady-xia/Blog/tree/master/vue-simple-uploader

2. 關(guān)于vue-simple-uploader

vue-simple-uploader是基于 simple-uploader.js 封裝的vue上傳插件。它的優(yōu)點(diǎn)包括且不限于以下幾種：

• 支持文件、多文件、文件夾上傳；支持拖拽文件、文件夾上傳
• 可暫停、繼續(xù)上傳
• 錯(cuò)誤處理
• 支持“秒傳”，通過(guò)文件判斷服務(wù)端是否已存在從而實(shí)現(xiàn)“秒傳”
• 分塊上傳
• 支持進(jìn)度、預(yù)估剩余時(shí)間、出錯(cuò)自動(dòng)重試、重傳等操作

讀這篇文章之前，建議先讀一遍simple-uploader.js的文檔，然后再讀一下vue-simple-uploader的文檔，了解一下各個(gè)參數(shù)的作用是什么，我在這里假定大家已經(jīng)比較熟悉了。。
vue-simple-uploader文檔

simple-uploader.js文檔

安裝：npm install vue-simple-uploader --save
使用：在main.js中：

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

3. 基于vue-simple-uploader封裝全局上傳組件

引入vue-simple-uploader后，我們開(kāi)始封裝全局的上傳組件globalUploader.vue，代碼比較長(zhǎng)，就不整個(gè)放出來(lái)了，源碼放到github上了，這里一步一步地講解。

template部分如下，本人自定義了模板和樣式，所以html部分比較長(zhǎng)，css部分暫時(shí)不列出，大家可以根據(jù)自己的ui去更改，主要關(guān)注一下uploader這個(gè)組件的options參數(shù)及文件added、success、progress、error幾個(gè)事件：

<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 ? '展開(kāi)':'折疊' ">
    <i class="iconfont" :class="collapse ? 'icon-fullscreen': 'icon-minus-round'"></i>
    </el-button>
    <el-button @click="close" type="text" title="關(guān)閉">
    <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> 暫無(wú)待上傳文件</div>
   </ul>
  </div>
  </uploader-list>

 </uploader>

 </div>
</template>

組件中的data部分：

data() {
 return {
 options: {
  target: 'http://xxxxx/xx', // 目標(biāo)上傳 URL
  chunkSize: '2048000', //分塊大小
  fileParameterName: 'file', //上傳文件時(shí)文件的參數(shù)名，默認(rèn)file
  maxChunkRetries: 3, //最大自動(dòng)失敗重試上傳次數(shù)
  testChunks: true, //是否開(kāi)啟服務(wù)器分片校驗(yàn)
  // 服務(wù)器分片校驗(yàn)函數(shù)，秒傳及斷點(diǎn)續(xù)傳基礎(chǔ)
  checkChunkUploadedByResponse: function (chunk, message) {
  let objMessage = JSON.parse(message);
  if (objMessage.skipUpload) {
   return true;
  }

  return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0
  },
  headers: {
  // 在header中添加的驗(yàn)證，請(qǐng)根據(jù)實(shí)際業(yè)務(wù)來(lái)
  Authorization: "Bearer " + Ticket.get().access_token
  },
 },
 attrs: {
  // 接受的文件類(lèi)型，形如['.png', '.jpg', '.jpeg', '.gif', '.bmp'...] 這里我封裝了一下
  accept: ACCEPT_CONFIG.getAll()
 },
 panelShow: false, //選擇文件后，展示上傳panel
 }
},

全局引用：
在app.vue中引用，即作為全局的組件一直存在，只不過(guò)在不使用的時(shí)候把上傳界面隱藏了

<global-uploader></global-uploader>

4. 文件上傳流程概覽

1. 點(diǎn)擊按鈕，觸發(fā)文件上傳操作：

（如果你做的不是全局上傳的功能，而是直接點(diǎn)擊上傳，忽略這一步。）

因?yàn)槲易龅氖侨稚蟼鞯牟寮劝焉蟼鞯拇翱陔[藏起來(lái)，在點(diǎn)擊某個(gè)上傳按鈕的時(shí)候，用Bus發(fā)送一個(gè)openUploader的事件，在globalUploader.vue中接收該事件，trigger我們uploader-btn的click事件。

在某個(gè)頁(yè)面中，點(diǎn)擊上傳按鈕，同時(shí)把要給后臺(tái)的參數(shù)帶過(guò)來(lái)（如果有的話），這里組件之間傳值我用的event bus，當(dāng)然用vuex會(huì)更好：

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

在globalUploader.vue中接收該事件：

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

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

2. 選擇文件后，將上傳的窗口展示出來(lái)，開(kāi)始md5的計(jì)算工作

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

這里有個(gè)前提，我在uploader中將autoStart設(shè)為了false，為什么要這么做？

在選擇文件之后，我要計(jì)算MD5，以此來(lái)實(shí)現(xiàn)斷點(diǎn)續(xù)傳及秒傳的功能，所以選擇文件后直接開(kāi)始上傳肯定不行，要等MD5計(jì)算完畢之后，再開(kāi)始文件上傳的操作。

具體的MD5計(jì)算方法，會(huì)在下面講，這里先簡(jiǎn)單引出。

上傳過(guò)程中，會(huì)不斷觸發(fā)file-progress上傳進(jìn)度的回調(diào)

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

3. 文件上傳成功后

文件上傳成功后，在“上傳完成”的回調(diào)中，通過(guò)服務(wù)端返回的needMerge字段，來(lái)判斷是否需要再發(fā)送合并分片的請(qǐng)求，
如果這個(gè)字段為true，則需要給后臺(tái)發(fā)一個(gè)請(qǐng)求合并的ajax請(qǐng)求，否則直接上傳成功。

注意：這里的needMerge是我和后臺(tái)商議決定的字段名

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

 // 服務(wù)器自定義的錯(cuò)誤，這種錯(cuò)誤是Uploader無(wú)法攔截的
 if (!res.result) {
 this.$message({ message: res.message, type: 'error' });
 return
 }
	
	// 如果服務(wù)端返回需要合并
 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)
},

5. 文件分片

vue-simple-uploader自動(dòng)將文件進(jìn)行分片，在options的chunkSize中可以設(shè)置每個(gè)分片的大小。

如圖：對(duì)于大文件來(lái)說(shuō)，會(huì)發(fā)送多個(gè)請(qǐng)求，在設(shè)置testChunks為true后（在插件中默認(rèn)就是true），會(huì)發(fā)送與服務(wù)器進(jìn)行分片校驗(yàn)的請(qǐng)求，下面的第一個(gè)get請(qǐng)求就是該請(qǐng)求；后面的每一個(gè)post請(qǐng)求都是上傳分片的請(qǐng)求

看一下發(fā)送給服務(wù)端的參數(shù)，其中chunkNumber表示當(dāng)前是第幾個(gè)分片，totalChunks代表所有的分片數(shù)，這兩個(gè)參數(shù)都是都是插件根據(jù)你設(shè)置的chunkSize來(lái)計(jì)算的。

需要注意的就是在最后文件上傳成功的事件中，通過(guò)后臺(tái)返回的字段，來(lái)判斷是否要再給后臺(tái)發(fā)送一個(gè)文件合并的請(qǐng)求。

6. MD5的計(jì)算過(guò)程

斷點(diǎn)續(xù)傳及秒傳的基礎(chǔ)是要計(jì)算文件的MD5，這是文件的唯一標(biāo)識(shí)，然后服務(wù)器根據(jù)MD5進(jìn)行判斷，是進(jìn)行秒傳還是斷點(diǎn)續(xù)傳。

在file-added事件之后，就計(jì)算MD5，我們最終的目的是將計(jì)算出來(lái)的MD5加到參數(shù)里傳給后臺(tái)，然后繼續(xù)文件上傳的操作，詳細(xì)的思路步驟是：

• 把uploader組件的autoStart設(shè)為false，即選擇文件后不會(huì)自動(dòng)開(kāi)始上傳
• 先通過(guò) file.pause()暫停文件，然后通過(guò)H5的FileReader接口讀取文件
• 將異步讀取文件的結(jié)果進(jìn)行MD5，這里我用的加密工具是spark-md5，你可以通過(guò)npm install spark-md5 --save來(lái)安裝，也可以使用其他MD5加密工具。
• file有個(gè)屬性是uniqueIdentifier，代表文件唯一標(biāo)示，我們把計(jì)算出來(lái)的MD5賦值給這個(gè)屬性 file.uniqueIdentifier = md5，這就實(shí)現(xiàn)了我們最終的目的。
• 通過(guò)file.resume()開(kāi)始/繼續(xù)文件上傳。

/**
* 計(jì)算md5，實(shí)現(xiàn)斷點(diǎn)續(xù)傳及秒傳
* @param file
*/
/**
* 計(jì)算md5，實(shí)現(xiàn)斷點(diǎn)續(xù)傳及秒傳
* @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();
 
 // 文件狀態(tài)設(shè)為"計(jì)算MD5"
 this.statusSet(file.id, 'md5');
 
 file.pause();
 
 loadNext();
 
 fileReader.onload = (e => {
 spark.append(e.target.result);
 if (currentChunk < chunks) {
  currentChunk++;
  loadNext();
  // 實(shí)時(shí)展示MD5的計(jì)算進(jìn)度
  this.$nextTick(() => {
  $(`.myStatus_${file.id}`).text('校驗(yàn)MD5 '+ ((currentChunk/chunks)*100).toFixed(0)+'%')
  })
 } else {
  let md5 = spark.end();
  this.computeMD5Success(md5, file);
  console.log(`MD5計(jì)算完畢：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${file.size} 用時(shí)：${new Date().getTime() - time} ms`);
 }
 });
 fileReader.onerror = function () {
 this.error(`文件${file.name}讀取出錯(cuò)，請(qǐng)檢查該文件`)
 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) {
 // 將自定義參數(shù)直接加載uploader實(shí)例的opts上
 Object.assign(this.uploader.opts, {
 query: {
  ...this.params,
 }
 })
 file.uniqueIdentifier = md5;
 file.resume();
 this.statusRemove(file.id);
},

給file的uniqueIdentifier 屬性賦值后，請(qǐng)求中的identifier即是我們計(jì)算出來(lái)的MD5

7. 秒傳及斷點(diǎn)續(xù)傳

在計(jì)算完MD5后，我們就能談斷點(diǎn)續(xù)傳及秒傳的概念了。

服務(wù)器根據(jù)前端傳過(guò)來(lái)的MD5去判斷是否可以進(jìn)行秒傳或斷點(diǎn)續(xù)傳：

• a. 服務(wù)器發(fā)現(xiàn)文件已經(jīng)完全上傳成功，則直接返回秒傳的標(biāo)識(shí)。
• b. 服務(wù)器發(fā)現(xiàn)文件上傳過(guò)分片信息，則返回這些分片信息，告訴前端繼續(xù)上傳，即斷點(diǎn)續(xù)傳。

7.1 對(duì)于前端來(lái)說(shuō)

在每次上傳過(guò)程的最開(kāi)始，vue-simple-uploader會(huì)發(fā)送一個(gè)get請(qǐng)求，來(lái)問(wèn)服務(wù)器我哪些分片已經(jīng)上傳過(guò)了，

這個(gè)請(qǐng)求返回的結(jié)果也有幾種可能：

a. 如果是秒傳，在請(qǐng)求結(jié)果中會(huì)有相應(yīng)的標(biāo)識(shí)，比如我這里是skipUpload為true，且返回了url，代表服務(wù)器告訴我們這個(gè)文件已經(jīng)有了，我直接把url給你，你不用再傳了，這就是秒傳。

圖a1：秒傳情況下后臺(tái)返回值

圖a2：秒傳gif

b. 如果后臺(tái)返回了分片信息，這是斷點(diǎn)續(xù)傳。如圖，返回的數(shù)據(jù)中有個(gè)uploaded的字段，代表這些分片是已經(jīng)上傳過(guò)的了，插件會(huì)自動(dòng)跳過(guò)這些分片的上傳。

圖b1：斷點(diǎn)續(xù)傳情況下后臺(tái)返回值

圖b2：斷點(diǎn)續(xù)傳gif

c. 可能什么都不會(huì)返回，那這就是個(gè)全新的文件了，走完整的分片上傳邏輯

7.2 前端做分片檢驗(yàn)：checkChunkUploadedByResponse

前面講的是概念，現(xiàn)在說(shuō)一說(shuō)前端在拿到這些返回值之后怎么處理。
插件自己是不會(huì)判斷哪個(gè)需要跳過(guò)的，在代碼中由options中的checkChunkUploadedByResponse控制，它會(huì)根據(jù) XHR 響應(yīng)內(nèi)容檢測(cè)每個(gè)塊是否上傳成功了，成功的分片直接跳過(guò)上傳
你要在這個(gè)函數(shù)中進(jìn)行處理，可以跳過(guò)的情況下返回true即可。

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

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

注：skipUpload 和 uploaded 是我和后臺(tái)商議的字段，你要按照后臺(tái)實(shí)際返回的字段名來(lái)。

8. 源碼及后記

總共幾個(gè)文件，app.vue，封裝的全局上傳組件globalUploader.vue，調(diào)用組件的demo.vue，源碼放到github上了：https://github.com/shady-xia/Blog/tree/master/vue-simple-uploader。

globalUploader源碼中的ticket和api都是自己用的， 一個(gè)是accesstoken，一個(gè)是基于axios封裝的請(qǐng)求庫(kù)，請(qǐng)根據(jù)你的業(yè)務(wù)需求替代之。另外上傳界面的展開(kāi)和收起用到了jquery，通知用到了Element的組件，請(qǐng)忽略之。

本人水平有限，更多的是提供一個(gè)思路，供大家參考。

封裝完這個(gè)插件后，再加上開(kāi)發(fā)文件資源庫(kù)，我發(fā)現(xiàn)已經(jīng)基本實(shí)現(xiàn)了一個(gè)簡(jiǎn)易的百度網(wǎng)盤(pán)了，一個(gè)管理系統(tǒng)，功能搞的這么復(fù)雜，坑爹??！

8.1 關(guān)于第一個(gè)分片丟失問(wèn)題

關(guān)于開(kāi)啟了testChunk后服務(wù)器收不到第一個(gè)分片的問(wèn)題：
simpleUploader文檔上是這么寫(xiě)的：

testChunk的那個(gè)get請(qǐng)求，默認(rèn)帶了第一個(gè)分片給服務(wù)端，如果服務(wù)端返回的是200狀態(tài)，則假定當(dāng)前塊已經(jīng)上傳過(guò)了，不會(huì)再上傳了；
所以這里服務(wù)器要改成其他http狀態(tài)碼，比如204，這樣就不在“ 200, 201, 202”這個(gè)集合里了，代表服務(wù)端還沒(méi)有這個(gè)塊，需要按照標(biāo)準(zhǔn)模式上傳，這樣第一個(gè)分片就會(huì)再次被上傳了

2019/8/6更新

1、優(yōu)化了計(jì)算文件MD5的方式，展示MD5的計(jì)算進(jìn)度

之前文章中計(jì)算MD5的方式為對(duì)整個(gè)文件直接計(jì)算MD5，很吃內(nèi)存，容易導(dǎo)致瀏覽器崩潰
我改成了通過(guò)分片讀取文件的方式計(jì)算MD5，防止直接讀取大文件時(shí)因內(nèi)存占用過(guò)大導(dǎo)致的網(wǎng)頁(yè)卡頓、崩潰

2、新增了的自定義的狀態(tài)

（之前我就封裝了幾種自定義狀態(tài)，最近總有小伙伴問(wèn)怎么沒(méi)有“校驗(yàn)MD5”，“合并中”這些狀態(tài)，我就把我的方法寫(xiě)出來(lái)了，方式很笨，但是能實(shí)現(xiàn)效果）

插件原本只支持了success、error、uploading、paused、waiting這幾種狀態(tài)，

由于業(yè)務(wù)需求，我額外增加了“校驗(yàn)MD5”、“合并中”、“轉(zhuǎn)碼中”、“上傳失敗”這幾種自定義的狀態(tài)

由于前幾種狀態(tài)是插件已經(jīng)封裝好的，我不能改源碼，只能用比較hack的方式：
當(dāng)自定義狀態(tài)開(kāi)始時(shí)，要手動(dòng)調(diào)一下statusSet方法，生成一個(gè)p標(biāo)簽蓋在原本的狀態(tài)上面；當(dāng)自定義狀態(tài)結(jié)束時(shí)，還要手動(dòng)調(diào)用statusRemove移除該標(biāo)簽。

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

具體使用可以參考源碼，同時(shí)希望simple-uploader的插件作者后面能夠支持自定義狀態(tài)的配置。

到此這篇關(guān)于基于vue-simple-uploader封裝文件分片上傳、秒傳及斷點(diǎn)續(xù)傳的全局上傳插件功能的文章就介紹到這了,更多相關(guān)vue simple uploader封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論