基于vue-simple-uploader封装⽂件分⽚上传、秒传及断点续传的全局上传插件功能
⽬录
1. 前⾔
2. 关于vue-simple-uploader
3. 基于vue-simple-uploader封装全局上传组件
4. ⽂件上传流程概览
3. ⽂件上传成功后
5. ⽂件分⽚
6. MD5的计算过程
7. 秒传及断点续传
7.1 对于前端来说
7.2 前端做分⽚检验：checkChunkUploadedByResponse
8. 源码及后记
8.1 关于第⼀个分⽚丢失问题
1. 前⾔
之前公司要在管理系统中做⼀个全局上传插件，即切换各个页⾯的时候，上传界⾯还在并且上传不会受到影响，这在vue这种spa框架⾯前并不是什么难题。然⽽后端⼤佬说我们要实现分⽚上传、秒传以及断点续传的功能，听起来头都⼤了。
很久之前我写了⼀篇webuploader的⽂章，结果使⽤起来发现问题很多，且官⽅团队不再维护这个插件了，经过多天调研及踩雷，最终决定基于vue-simple-uploader插件实现该功能，在项⽬中使⽤起来⽆痛且稳定。
如果你只是想实现基本的（⾮定制化的）上传功能，直接使⽤vue-simple-uploader，多读⼀下它的⽂档，不需要更多的⼆次封装。
如果你只是想实现全局上传插件，也可以参照⼀下我的实现。
如果你⽤到了分⽚上传、秒传及断点续传这些复杂的功能，恭喜你，这篇⽂章的重点就在于此。
2. 关于vue-simple-uploader
vue-simple-uploader是基于simple-uploader.js封装的vue上传插件。它的优点包括且不限于以下⼏种：
⽀持⽂件、多⽂件、⽂件夹上传；⽀持拖拽⽂件、⽂件夹上传
可暂停、继续上传
错误处理
⽀持“秒传”，通过⽂件判断服务端是否已存在从⽽实现“秒传”
分块上传
⽀持进度、预估剩余时间、出错⾃动重试、重传等操作
读这篇⽂章之前，建议先读⼀遍simple-uploader.js的⽂档，然后再读⼀下vue-simple-uploader的⽂档，了解⼀下各个参数的作⽤是什么，我在这⾥假定⼤家已经⽐较熟悉了。。
安装：npm install vue-simple-uploader --save
使⽤：在main.js中：
import uploader from 'vue-simple-uploader'
Vue.use(uploader)
3. 基于vue-simple-uploader封装全局上传组件
引⼊vue-simple-uploader后，我们开始封装全局的上传组件globalUploader.vue，代码⽐较长，就不整个放出来了，源码放到github上了，这⾥⼀步⼀步地讲解。
template部分如下，本⼈⾃定义了模板和样式，所以html部分⽐较长，css部分暂时不列出，⼤家可以根据⾃⼰的ui去更改，主要关注⼀下uploader这个组件的options参数及⽂
件added、success、progress、error⼏个事件：
<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部分：
data() {
return {
options: {
target: '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 " + ().access_token
},
},
attrs: {
/
/ 接受的⽂件类型，形如['.png', '.jpg', '.jpeg', '.gif', '.bmp'...] 这⾥我封装了⼀下
accept: All()
},
panelShow: false, //选择⽂件后，展⽰上传panel
}
},
全局引⽤：
在app.vue中引⽤，即作为全局的组件⼀直存在，只不过在不使⽤的时候把上传界⾯隐藏了
<global-uploader></global-uploader>
4. ⽂件上传流程概览
1. 点击按钮，触发⽂件上传操作：
（如果你做的不是全局上传的功能，⽽是直接点击上传，忽略这⼀步。）
因为我做的是全局上传的插件，要先把上传的窗⼝隐藏起来，在点击某个上传按钮的时候，⽤Bus发送⼀个openUploader的事件，在globalUploader.vue中接收该事件，trigger我们uploader-btn的click事件。在某个页⾯中，点击上传按钮，同时把要给后台的参数带过来（如果有的话），这⾥组件之间传值我⽤的event bus，当然⽤vuex会更好：
Bus.$emit('openUploader', {
superiorID: this.superiorID
})
在globalUploader.vue中接收该事件：
Bus.$on('openUploader', query => {
this.params = query || {};
if (this.$refs.uploadBtn) {
/
/ 这样就打开了选择⽂件的操作窗⼝
$('#global-uploader-btn').click();
}
});
2. 选择⽂件后，将上传的窗⼝展⽰出来，开始md5的计算⼯作
onFileAdded(file) {
this.panelShow = true;
// 计算MD5，下⽂会提到
thisputeMD5(file);
},
这⾥有个前提，我在uploader中将autoStart设为了false，为什么要这么做？
在选择⽂件之后，我要计算MD5，以此来实现断点续传及秒传的功能，所以选择⽂件后直接开始上传肯定不⾏，要等MD5计算完毕之后，再开始⽂件上传的操作。
具体的MD5计算⽅法，会在下⾯讲，这⾥先简单引出。
上传过程中，会不断触发file-progress上传进度的回调
// ⽂件进度的回调
onFileProgress(rootFile, file, chunk) {前端大文件上传解决方案
console.log(`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${dByte / 1024 / 1024}`)
},
3. ⽂件上传成功后
⽂件上传成功后，在“上传完成”的回调中，通过服务端返回的needMerge字段，来判断是否需要再发送合并分⽚的请求，
如果这个字段为true，则需要给后台发⼀个请求合并的ajax请求，否则直接上传成功。
注意：这⾥的needMerge是我和后台商议决定的字段名
onFileSuccess(rootFile, file, response, chunk) {
let res = JSON.parse(response);
// 服务器⾃定义的错误，这种错误是Uploader⽆法拦截的
if (!sult) {
this.$message({ message: ssage, type: 'error' });
return
}
// 如果服务端返回需要合并
if (dMerge) {
tempName: pName,
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⾃动将⽂件进⾏分⽚，在options的chunkSize中可以设置每个分⽚的⼤⼩。
如图：对于⼤⽂件来说，会发送多个请求，在设置testChunks为true后（在插件中默认就是true），会发送与服务器进⾏分⽚校验的请求，下⾯的第⼀个get请求就是该请求；后⾯的每⼀个post请求都是上传分⽚的请求
看⼀下发送给服务端的参数，其中chunkNumber表⽰当前是第⼏个分⽚，totalChunks代表所有的分⽚数，这两个参数都是都是插件根据你设置的chunkSize来计算的。
需要注意的就是在最后⽂件上传成功的事件中，通过后台返回的字段，来判断是否要再给后台发送⼀个⽂件合并的请求。
6. MD5的计算过程
断点续传及秒传的基础是要计算⽂件的MD5，这是⽂件的唯⼀标识，然后服务器根据MD5进⾏判断，是进⾏秒传还是断点续传。
在file-added事件之后，就计算MD5，我们最终的⽬的是将计算出来的MD5加到参数⾥传给后台，然后继续⽂件上传的操作，详细的思路步骤是：
把uploader组件的autoStart设为false，即选择⽂件后不会⾃动开始上传
先通过file.pause()暂停⽂件，然后通过H5的FileReader接⼝读取⽂件
将异步读取⽂件的结果进⾏MD5，这⾥我⽤的加密⼯具是spark-md5，你可以通过npm install spark-md5 --save来安装，也可以使⽤其他MD5加密⼯具。
file有个属性是uniqueIdentifier，代表⽂件唯⼀标⽰，我们把计算出来的MD5赋值给这个属性file.uniqueIdentifier = md5，这就实现了我们最终的⽬的。
通过sume()开始/继续⽂件上传。
/**
* 计算md5，实现断点续传及秒传
* @param file
*/
/**
* 计算md5，实现断点续传及秒传
* @param file
*/
computeMD5(file) {
let fileReader = new FileReader();
let time = new Date().getTime();
let blobSlice = File.prototype.slice || Slice || File.prototype.webkitSlice;
let currentChunk = 0;
const chunkSize = 10 * 1024 * 1000;
let chunks = il(file.size / chunkSize);
let spark = new SparkMD5.ArrayBuffer();
// ⽂件状态设为"计算MD5"
this.statusSet(file.id, 'md5');
file.pause();
loadNext();
spark.append(sult);
if (currentChunk < chunks) {
currentChunk++;
loadNext();
// 实时展⽰MD5的计算进度
this.$nextTick(() => {
$(`.myStatus_${file.id}`).text('校验MD5 '+ ((currentChunk/chunks)*100).toFixed(0)+'%')
})
} else {
let md5 = d();
thisputeMD5Success(md5, file);
console.log(`MD5计算完毕：${file.name} \nMD5：${md5} \n分⽚：${chunks} ⼤⼩:${file.size} ⽤时：${new Date().getTime() - time} ms`);
}
});
<(`⽂件${file.name}读取出错，请检查该⽂件`)
file.cancel();
};
function loadNext() {
let start = currentChunk * chunkSize;
let end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
}
},
computeMD5Success(md5, file) {
// 将⾃定义参数直接加载uploader实例的opts上
Object.assign(this.uploader.opts, {
query: {
...this.params,
}
})
file.uniqueIdentifier = md5;
this.statusRemove(file.id);
},
给file的uniqueIdentifier 属性赋值后，请求中的identifier即是我们计算出来的MD5
7. 秒传及断点续传
在计算完MD5后，我们就能谈断点续传及秒传的概念了。
服务器根据前端传过来的MD5去判断是否可以进⾏秒传或断点续传：
a. 服务器发现⽂件已经完全上传成功，则直接返回秒传的标识。
b. 服务器发现⽂件上传过分⽚信息，则返回这些分⽚信息，告诉前端继续上传，即断点续传。
7.1 对于前端来说
在每次上传过程的最开始，vue-simple-uploader会发送⼀个get请求，来问服务器我哪些分⽚已经上传过了，
这个请求返回的结果也有⼏种可能：
a. 如果是秒传，在请求结果中会有相应的标识，⽐如我这⾥是skipUpload为true，且返回了url，代表服务器告诉我们这个⽂件已经有了，我直接把url给你，你不⽤再传了，这就是秒传。图a1：秒传情况下后台返回值
图a2：秒传gif
b. 如果后台返回了分⽚信息，这是断点续传。如图，返回的数据中有个uploaded的字段，代表这些分⽚是已经上传过的了，插件会⾃动跳过这些分⽚的上传。
图b1：断点续传情况下后台返回值
图b2：断点续传gif
c. 可能什么都不会返回，那这就是个全新的⽂件了，⾛完整的分⽚上传逻辑
7.2 前端做分⽚检验：checkChunkUploadedByResponse
前⾯讲的是概念，现在说⼀说前端在拿到这些返回值之后怎么处理。
插件⾃⼰是不会判断哪个需要跳过的，在代码中由options中的checkChunkUploadedByResponse控制，它会根据 XHR 响应内容检测每个块是否上传成功了，成功的分⽚直接跳过上传你要在这个函数中进⾏处理，可以跳过的情况下返回true即可。
checkChunkUploadedByResponse: function (chunk, message) {
let objMessage = JSON.parse(message);
if (objMessage.skipUpload) {
return true;
}
return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0
},