基于 vue-simple-uploader 实现分片上传的全局上传插件1.关于 vue-simple-uploader

1.关于 vue-simple-uploader

vue-simple-uploader 是基于 simple-uploader.js 封装的 vue 上传插件。它

的优点包括且不限于以下几种：

1、支持文件、多文件、文件夹上传；支持拖拽文件、文件夹上传

2、可暂停、继续上传

3、错误处理

4、分块上传

5、支持进度、预估剩余时间、出错自动重试、重传等操作

在使用 vue-simple-uploader 之前，建议大家先看一下 simple-uploader，里

面有更详细的介绍，对于使用 vue-simple-uploader 有很大帮助

链接地址：github.com/simple-uplo…

2.安装使用 vue-simple-uploader

安装：npm install vue-simple-uploader --save

在 main.js 中使用

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

3.封装全局上传组件

main.js 中引入后，开始封装 simpleUploader.vue 组件

template 部分如下：

<div class="global-uploader">
<uploader
ref="uploader"
class="uploader-app"
:options="options"
:autoStart="false"
@file-added="onFileAdded"
@file-success="onFileSuccess"
@file-error="onFileError">
<uploader-btn id="`uploadButton${getTime}`" class="uploader-btn">
选择文件
</uploader-btn>
// 上传列表
<uploader-list v-show="panelShow">
<div class="file-panel" slot-scope="props">
<div class="file-title">
<div style="display: flex;align-items: center; 
justify-content: space-between;">
<h2>文件列表</h2>
// 总数量和已上传数量
<span>({{count}} / {{$refs.uploader ? 
$refs.uploader.fileList.length : 0}})</span>
</div>
<div class="operate">
<el-button type="text" icon="el-icon-close"
@click="close" title="关闭"></el-button>
</div>
</div>
<ul class="file-list">
<li v-for="file in props.fileList" :key="file.id">
<uploaderfile :file="file" :list="true"></uploader-file>
</li>
<div v-show="!props.fileList.length" class="nofile"></div>
</ul>
</div>
</uploader-list>
</uploader>
</div>

组件中的 data 部分：

name: 'SimpleUploader',
data () {
// 选择文件后显示
panelShow: false,
options: {
// 目标上传地址 写自己要上传到的地址即可
target: 'xxxxxx',
// 分块大小
chunkSize: '5242800',
// 是否开启服务器分片校验
testChunks: true,
// 服务器分片校验函数 秒传及断点续传的基础
checkChunkUploadedByResponse: (chunk, message) => {
let objMessage = JSON.parse(message);
// 这里根据实际业务来 uploaded 是后端返给我的字段 用来判断哪
些片已经上传过了 不用再重复上传了
return (objMessage.data.uploaded || 
[]).indexOf(chunk.offset + 1) >= 0;
}
},
getTime: (new Date().getTime()) / 1000
}
}

可以封装成全局组件使用也可在需要的地方引用即可

<simpleUploader ref="uploaderRef"
@uploaderSuccess="uploaderSuccess"></simpleUploader>

4.上传流程预览

触发选择文件按钮

我这里是在使用组件的地方通过 ref 调用组件里面 uploader-btn 这个按钮的上

传方法

this.$refs.uploaderRef.selectFile();

这里贴出 selectFile 这一上传方法的代码

selectFile () {

// 这样就通过外边的方法触发组件里面上传按钮的上传方法

// 这里按钮用了时间戳 是为了解决如果有同一页面用了好几个上传组件 id 不唯一
问题
// 如果页面中只用了一个上传组件 则忽略时间戳
document.getElementById(`uploadButton${this.getTime}`);
}

这样就打开了选择文件的弹框开始选择文件

选择文件后打开上传列表弹框

这里用到 onFileAdded() 方法

onfileAdded (file) {
this.panelShow = true;
}

这里有个前提，我在 uploader 中将 autoStart 设为了 false

文件上传成功后的回调

// 四个参数 onFileSuccess (rootFile, file, response, chunk) { // 这里我调了后端的接口然后传参数(axios 请求举例按实际情况来) this. $axios({ url: 'http://xxxx', method:'post', // params: params (参数-根据后端情况传参) }).then(res => { console.log(res); }); // 成功后触发使用地方的方法即 uploaderSuccess this.$ emit('uploaderSuccess'); }
文件分片

vue-simple-uploader 自动将文件进行分片，在 options 的 chunkSize 中可以

设置每个分片的大小。对于大文件来说，会发送多个请求，在设置 testChunks

为 true 后（在插件中默认就是 true），会发送与服务器进行分片校验的请求

第一个就是该请求下边的就是 post 上传文件请求

5.上传失败方法

失败都会在 onFileError 这个方法里和上传成功的方法一样返回四个参数，去

做自己想要的错误提示即可