formdata上传文件_vue，webuploader实现文件分片上传，并显示上传进度

1.效果图

2.上传文件时，如果使用普通上传，则需要上传一个文件完成后才能上传下一个文件，如果文件很大时，可能会造成浏览器无响应，如果采用分片上传方式，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。

当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。

在项目中引入webuploader

第一步：引入第三方js和css
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/webuploader.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/webuploader.css">

注意：也可通过安装依赖的方式，引入jquery插件
npm install jquery --save第二步：封装Vue组件

<template>
<div class="upload"></div>
</template>

<script>

export default {
name: 'vue-upload',
props: {
accept: {
type: Object,default: null,
},
// 上传地址
url: {
type: String,default: uploadUrl,
},
// 上传最大数量 默认为100
fileNumLimit: {
type: Number,default: 1,
},
// 大小限制 默认2M
fileSingleSizeLimit: {
type: Number,default: 1024*1024*1024*10,
},
// 上传时传给后端的参数，一般为token，key等
formData: {
type: Object,default: null
},
// 生成formData中文件的key，下面只是个例子，具体哪种形式和后端商议
keyGenerator: {
type: Function,default(file) {const currentTime = new Date().getTime();const key = `${currentTime}.${file.name}`;return key;
},
},
multiple: {
type: Boolean,default: false,
},
// 上传按钮ID
uploadButton: {
type: String,default: '',
},
},
data() {return {
uploader: null
};
},
mounted() {this.initWebUpload();
},
methods: {
initWebUpload() {this.uploader = WebUploader.create({
auto: false, // 选完文件后，是否自动上传
// swf: '/static/lib/webuploader/Uploader.swf', // swf文件路径
server: this.url, // 文件接收服务端
pick: {
id: this.uploadButton, // 选择文件的按钮
multiple: this.multiple, // 是否多文件上传 默认false
label: '',
},
accept: this.getAccept(), // 允许选择文件格式。
threads:10,
fileNumLimit: this.fileNumLimit, // 限制上传个数
fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制单个上传图片的大小
formData: this.formData, // 上传所需参数
chunked: true, //分片上传
chunkSize: 1024*1024*10, //分片大小
duplicate: true, // 重复上传
});
// 当有文件被添加进队列的时候，添加到页面预览this.uploader.on('fileQueued', (file) => {this.$emit('fileChange', file);
});this.uploader.on('beforeFileQueued', (file) => {this.$emit('beforeFileQueued', file);
});this.uploader.on('uploadStart', (file) => {
console.log( this.keyGenerator)
// 在这里可以准备好formData的数据
// this.uploader.options.formData.key = this.keyGenerator(file);
});
// 文件上传过程中创建进度条实时显示。this.uploader.on('uploadProgress', (file, percentage) => {
});this.uploader.on('uploadSuccess', (file, response) => {var _this=this;this.$emit('success', file, response);
});this.uploader.on('uploadError', (file, reason) => {
console.log(reason);this.$emit('uploadsError', file, reason);for (var i = 0; i < this.uploader.getFiles().length; i++) {this.uploader.removeFile(this.uploader.getFiles()[i]);
}this.uploader.reset();this.initWebUpload();//初始化
});this.uploader.on('error', (type) => {
let errorMessage = '';if (type === 'F_EXCEED_SIZE') {
errorMessage = `文件大小不能超过${this.fileSingleSizeLimit / (1024 * 1000)}M`;
} else if (type === 'Q_EXCEED_NUM_LIMIT') {
errorMessage = '文件上传已达到最大上限数';
} else {
errorMessage = `上传出错！请检查后重新上传！错误代码${type}`;
}
console.error(errorMessage);this.$emit('error', errorMessage);
});this.uploader.on('uploadComplete', (file, response) => {this.$emit('complete', file, response);
});this.uploader.on('stopUpload', () => {var _this=this;
_this.uploader.reset();
_this.initWebUpload();//初始化
});this.uploader.on('uploadFinished', () => {
console.log(_this.uploader.getFiles())
});
},
getStats:function(){return this.uploader.getStats();
},
upload(file,data) {this.uploader.options.formData=data;//传参数this.uploader.upload(file,data);
},
stop(file) {this.uploader.stop(file);
},
reset(){this.uploader.reset();
},
refresh(){this.uploader.refresh();
},
// 取消并中断文件上传
cancelFile(file) {this.uploader.cancelFile(file);
},
// 在队列中移除文件
removeFile(file, bool) {this.uploader.removeFile(file, bool);
},
getFiles() {return this.uploader.getFiles();
},
getAccept() {return {
title: 'Videos',
extensions: 'mp4,flv,avi,wmv,ogg,rmvb,mts',
mimeTypes: '.mp4,.flv,.avi,.wmv,.ogg,.rmvb,.mts'
};
},
},
};

</script>

第三步 把第二步组件引到你的页面中，使用组件，实现分片上传