优点：
1.支持文件、多文件、文件夹上传
2.支持拖拽文件、文件夹上传
3.统一对待文件和文件夹，方便操作管理
4.可暂停、继续上传
5.错误处理
6.支持“快传”，通过文件判断服务端是否已存在从而实现“快传”
7.上传队列管理，支持最大并发上传
8.分块上传
9.支持进度、预估剩余时间、出错自动重试、重传等操作
// 安装：
npm install vue-simple-uploader --save
// 使用：在main.js中：
import uploader from 'vue-simple-uploader'
Vue.use(uploader)
html部分:
<uploader
v-if="reFresh"
:options.sync="options"
@file-success="onFileSuccess"
@file-progress="onFileProgress"
@file-error="onFileError"
@file-added="onFileAdded"
class="uploader-example"
@files-added="onfiles"
@file-complete="oncomplete"
@complete="Complete"
ref="upload">
<uploader-unsupport></uploader-unsupport>
<uploader-drop>
<p>选择上传文件类型</p>
<uploader-btn style="margin: 20px 20px 20px 50px">选择上传文件</uploader-btn >
<uploader-btn style="margin: 20px 30px" :directory="true">选择上传文件夹</uploader-btn>
</uploader-drop>
<uploader-list></uploader-list>
</uploader>
组件中的data部分：
data(){
return{
options: {
target: "", //上传地址
chunkSize: "2048000", //分块大小
fileParameterName: "file", //上传文件时文件的参数名，默认file
maxChunkRetries: 3, //最大自动失败重试上传次数
testChunks: false, //是否开启服务器分片校验
autoStart: true, //默认 true, 是否选择文件后自动开始上传。
speedSmoothingFactor: 0.02, //平均速度
progressCallbacksInterval: 500, //平均速度回調時間
//更多参数看文档说明
},
}
}
组件中的 methods部分：
methods: {
// 文件上传
onFileSuccess(rootFile, file, response, chunk) {
let res = JSON.parse(response);
if (res.res_code != 0) {
return this.$message.error(res.res_msg);
}
this.startIndex();
},
// 文件上传进度的回调
onFileProgress(rootFile, file, chunk) {
console.log(
`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${
chunk.endByte / 1024 / 1024
}`
);
this.U_success = "1";
},
// 文件上传出错
onFileError(rootFile, file, response, chunk) {
console.log(rootFile);
console.log(response);
},
//判断文件是否已经上传
onfiles(files, fileList) {
if (files.length == 0) {
return this.$message.error("文件已存在，请勿重复上传！");
}
},
Complete() {
console.log("上传完毕");
this.U_success = "上传完毕";
},
//清空上传完成的文件列表
oncomplete() {
// this.$refs.upload.files = [];
// this.$refs.upload.fileList = [];
console.log("上传成功！");
// this.$message.success("上传成功！");
},
}
遇到的问题：
在初始化options里将query设为函数，但是不能携带动态参数，如动态路径 因为options是在实例化的时候传入配置项，所以在传动态上传路径的时候我用的是v-if销毁组件 也是因为上传列表不好清除 其中上传成功后我用的是组件中的complete时间，监听到文件上传成功后 this.refs.upload.files = [ ]; this.refs.upload.fileList = [ ]; 清空上传列表 在文件重复上传后就会有问题，就算清空了，所有的事件都没有监听到 this.refs.upload.files和this.refs.upload.fileList 里面有数据，但是所有流程走完它就会把重复上传的文件添加到files、fileList里面，所以用了 setTimeout(function(){ this.refs.upload.files = [ ]; this.refs.upload.fileList = [ ]; },50); 后来需求改了就没有在代码中体现 还是用了销毁组件的方式来解决这些问题
参考 https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html#2-%E5%85%B3%E4%BA%8Evue-simple-uploader
记录一下自己用到的文件上传组件，具体内容参考文档 vue-simple-uploader文档 simple-uploader.js文档
