1.效果图
2.上传文件时，如果使用普通上传，则需要上传一个文件完成后才能上传下一个文件，如果文件很大时，可能会造成浏览器无响应，如果采用分片上传方式，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。
当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。
在项目中引入webuploader
第一步：引入第三方js和css
注意：也可通过安装依赖的方式，引入jquery插件
npm install jquery --save
第二步：封装Vue组件
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) {
constcurrentTime = newDate().getTime();
constkey = `${currentTime}.${file.name}`;
returnkey;
},
},
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(vari = 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'
};
},
},
};
第三步 把第二步组件引到你的页面中，使用组件，实现分片上传
