vue webuploader 文件上传组件开发

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

if (type == 'Q_TYPE_DENIED') {
this.$message({
message: '文件格式错误,请选择文件',
type: 'error'
});
}
if (type == 'F_EXCEED_SIZE') {
this.$message({
message: "文件超过" + this.sizeLimit / 1024 / 1024 + "M",
type: 'error'
});
}
}.bind(this));

//上传进度
this.wul_uploader.on('uploadProgress', function (file, percentage) {
this.percentage = percentage * 100;
this.fileObject.status = "uploading";
this.fileObject.percentage = this.percentage;
console.log(this.fileObject.percentage);
}.bind(this));

//每次切片上传完成之后的判断
this.wul_uploader.on('uploadAccept', function (object, ret) {
if (ret.responseCode != 0) {
this.wul_uploader.cancelFile(this.wul_uploader.getFiles()[0].id);
}
});

this.wul_uploader.on('uploadBeforeSend', function(object, data, headers) {
console.log(data);
});
},

option: function(key, val) {
this.wul_uploader.option(key, val);
var options = this.wul_uploader.options;
this.wul_uploader.destroy(); //注销uploader
this.wul_uploader = WebUploader.create(options);
this.wul_init();
},
start: function(){
if(this.wul_uploader.getFiles()[0] != null) {
this.wul_uploader.upload(this.wul_uploader.getFiles()[0].id);
this.uploadLoading = true;
this.stopBtn = false;
} else {
this.$message({
message: "请选择上传文件",
type: 'error'
});
}
},
stop: function(){
this.wul_uploader.cancelFile(this.wul_uploader.getFiles()[0].id);
},
removeFile: function(file){
this.fileList.splice(this.fileList.indexOf(file), 1);
},
change: function(){
this.option('accept', {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png'
});
}
},
mounted(){
WebUploader.Uploader.register({
"before-send-file": "beforeSendFile",
"before-send": "beforeSend",
"after-send-file": "afterSendFile",
}, {
beforeSendFile: function (file) {
var deferred = WebUploader.Deferred();
this.wul_uploader.md5File(file).then(function (val) {
this.wul_fileMd5 = val;
this.wul_size = file.size;
this.wul_fileName = file.name;
var timestamp = Date.parse(new Date()) / 1000;
var signParam = "{chunkSize=" + this.chunkSize + ", fileMd5=" + this.wul_fileMd5 + ", size=" + this.wul_size + ", timestamp=" + timestamp + "}";
var sign = Base64.encode(CryptoJS.HmacSHA1(signParam, this.securityKey));
// 获取断点续传位置
jQuery.ajax({
type: "POST",
// 测试
url: this.checkUrl,