基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件

https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html

目录

• 1. 前言
• 2. 关于vue-simple-uploader
• 3. 基于vue-simple-uploader封装全局上传组件
• 4. 文件上传流程概览
• 5. 文件分片
• 6. MD5的计算过程
• 7. 秒传及断点续传 7.1 对于前端来说
• 7.2 前端做分片检验：

  checkChunkUploadedByResponse

1. 前言

之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现分片上传、秒传以及断点续传的功能，听起来头都大了。

很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于

vue-simple-uploader

如果你只是想实现基本的（非定制化的）上传功能，直接使用

vue-simple-uploader

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

2. 关于vue-simple-uploader

vue-simple-uploader

simple-uploader.js

• 支持文件、多文件、文件夹上传；支持拖拽文件、文件夹上传
• 可暂停、继续上传
• 错误处理
• 支持“秒传”，通过文件判断服务端是否已存在从而实现“秒传”
• 分块上传
• 支持进度、预估剩余时间、出错自动重试、重传等操作

读这篇文章之前，建议先读一遍

simple-uploader.js

vue-simple-uploader

simple-uploader.js文档

安装：

npm install vue-simple-uploader --save

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

3. 基于vue-simple-uploader封装全局上传组件

引入

vue-simple-uploader

globalUploader.vue

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: '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
}
},

全局引用：
在

app.vue

<global-uploader></global-uploader>

4. 文件上传流程概览

1. 点击按钮，触发文件上传操作：

（如果你做的不是全局上传的功能，而是直接点击上传，忽略这一步。）

因为我做的是全局上传的插件，要先把上传的窗口隐藏起来，在点击某个上传按钮的时候，用Bus发送一个

openUploader

globalUploader.vue

uploader-btn

在某个页面中，点击上传按钮，同时把要给后台的参数带过来（如果有的话），这里组件之间传值我用的

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，下文会提到
this.computeMD5(file);
},

这里有个前提，我在

uploader

autoStart

false

在选择文件之后，我要计算MD5，以此来实现断点续传及秒传的功能，所以选择文件后直接开始上传肯定不行，要等MD5计算完毕之后，再开始文件上传的操作。

具体的MD5计算方法，会在下面讲，这里先简单引出。

上传过程中，会不断触发file-progress上传进度的回调

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

3. 文件上传成功后
文件上传成功后，在“上传完成”的回调中，通过服务端返回的

needMerge

注意：这里的

needMerge

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)
},

5. 文件分片

vue-simple-uploader

options

chunkSize

如图：对于大文件来说，会发送多个请求，在设置

testChunks

true

true

看一下发送给服务端的参数，其中

chunkNumber

totalChunks

chunkSize

需要注意的就是在最后文件上传成功的事件中，通过后台返回的字段，来判断是否要再给后台发送一个文件合并的请求。

6. MD5的计算过程

断点续传及秒传的基础是要计算文件的

MD5

MD5

在

file-added

MD5

MD5

1. 把uploader组件的

   autoStart

   设为

   false

   ，即选择文件后不会自动开始上传
2. 先通过 

   file.pause()

   暂停文件，然后通过H5的

   FileReader

   接口读取文件
3. 将异步读取文件的结果进行

   MD5

   ，这里我用的加密工具是

   spark-md5

   ，你可以通过

   npm install spark-md5 --save

   来安装，也可以使用其他MD5加密工具。
4. file有个属性是

   uniqueIdentifier

   ，代表文件唯一标示，我们把计算出来的MD5赋值给这个属性 

   file.uniqueIdentifier = md5

   ，这就实现了我们最终的目的。
5. 通过

   file.resume()

   开始/继续文件上传。

/**
* 计算md5，实现断点续传及秒传
* @param file
*/
computeMD5(file) {
let fileReader = new FileReader();
let time = new Date().getTime();
let md5 = '';

file.pause();

fileReader.readAsArrayBuffer(file.file);

fileReader.onload = (e => {
if (file.size != e.target.result.byteLength) {
this.error('Browser reported success but could not read the file until the end.');
return
}

md5 = SparkMD5.ArrayBuffer.hash(e.target.result);

// 添加额外的参数
this.uploader.opts.query = {
...this.params
}

console.log(`MD5计算完毕：${file.id} ${file.name} MD5：${md5} 用时：${new Date().getTime() - time} ms`);

file.uniqueIdentifier = md5;
file.resume();
});

fileReader.onerror = function () {
this.error('FileReader onerror was triggered, maybe the browser aborted due to high memory usage.');
};
},

给file的uniqueIdentifier 属性赋值后，请求中的identifier即是我们计算出来的MD5

7. 秒传及断点续传

在计算完

MD5

服务器根据前端传过来的

MD5

• a. 服务器发现文件已经完全上传成功，则直接返回秒传的标识。
• b. 服务器发现文件上传过分片信息，则返回这些分片信息，告诉前端继续上传，即断点续传。

7.1 对于前端来说

在每次上传过程的最开始，

vue-simple-uploader

这个请求返回的结果也有几种可能：

• a. 如果是秒传，在请求结果中会有相应的标识，比如我这里是

  skipUpload

  为

  true

  ，且返回了

  url

  ，代表服务器告诉我们这个文件已经有了，我直接把

  url

  给你，你不用再传了，这就是秒传。

图a1：秒传情况下后台返回值

图a2：秒传gif

• b. 如果后台返回了分片信息，这是断点续传。如图，返回的数据中有个

  uploaded

  的字段，代表这些分片是已经上传过的了，插件会自动跳过这些分片的上传。

图b1：断点续传情况下后台返回值

图b2：断点续传gif

• c. 可能什么都不会返回，那这就是个全新的文件了，走完整的分片上传逻辑

7.2 前端做分片检验：

checkChunkUploadedByResponse

前面讲的是概念，现在说一说前端在拿到这些返回值之后怎么处理。
插件自己是不会判断哪个需要跳过的，在代码中由

options

checkChunkUploadedByResponse

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

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

注：

skipUpload

uploaded

8. 源码及后记

总共几个文件，

app.vue

globalUploader.vue

demo.vue

globalUploader

ticket

api

jquery

本人水平有限，更多的是提供一个思路，供大家参考。

封装完这个插件后，再加上开发文件资源库，我发现已经基本实现了一个简易的百度网盘了，一个管理系统，功能搞的这么复杂，坑爹啊！

转载于:https://www.cnblogs.com/shaozhu520/p/11206372.html