vue webuploader 文件上传组件开发

2020-06-13 10:45:15易采站长站整理

chunkRetry: {
type: Number,
default: function(){
return 1;
}
},
//是否自动上传
auto: {
type: Boolean,
default: function(){
return false;
}
},
//上传文件大小限制
sizeLimit: {
type: Number,
default: function(){
return 209715200;
}
},
//上传文件数量限制
countLimit: {
type: Number,
default: function(){
return 5;
}
}
},
data(){
return{
appId: AppConfig.appId,
securityKey: AppConfig.securityKey,
checkUrl: AppConfig.checkUrl,
uploadUrl: AppConfig.uploadUrl,
mergeUrl: AppConfig.mergeUrl,
previewName: '选择文件',
wul_fileMd5: '',
wul_size: 0,
wul_fileName: '',
wul_chunk: 0,
wul_uploader: '',
fileList: [],
listType: 'text',
percentage: 0,
fileObject: {
uid: '',
name: '',
ext: '',
type: '',
status: '',
percentage: 0,
url: ''
},
uploadLoading: false,
stopBtn: true
}
},
methods: {
/**
* 获取当前上传列表中的文件
* @returns {Array|*}
*/
getFileList: function(){
return this.fileList;
},
//绑定事件
wul_init: function() {
//提示只能选择一个文件
this.wul_uploader.on('filesQueued', function (files) {
if (files.length > 1) {
this.$message({
message: '请选择一张图片',
type: 'error'
});
for (var i = 0; i < files.length; i++) {
this.wul_uploader.cancelFile(files[i]);
}
this.wul_uploader.reset();
this.wul_fileMd5 = "";
this.wul_size = 0;
this.wul_fileName = "";
this.wul_chunk = 0; //当前切片数
}else{
if( this.fileList.length == this.countLimit ){
this.$message({
message: '已经达到上传文件限制数量',
type: 'error'
});
}else{
//此时往需要上传的文件列表中添加文件
let file = {
uid: Date.now() + this.tempIndex++,
name: files[0].name,
type: files[0].type,
ext: files[0].ext,
status: "ready",
percentage: 0
}
this.fileObject = file;
this.fileList.push(this.fileObject);
}
}
}.bind(this));

//文件校验格式和大小
this.wul_uploader.on('error', function (type) {
debugger
if (type == 'Q_EXCEED_SIZE_LIMIT') {
this.$message({
message: '文件超过指定大小',
type: 'error'
});
}