vue webuploader 文件上传组件开发

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

jQuery.ajax({
type: "POST",
url: this.mergeUrl,
data: {
appId: this.appId,
fileMd5: this.wul_fileMd5,
fileName: file.name,
chunkSize: this.chunkSize,
sign: sign,
size: this.wul_size,
timestamp: timestamp
},
success: function (response) {
if (response.responseCode == 0) {
this.fileObject.status = "success";
this.fileObject.percentage = 100;
this.fileObject.url = response.filePath;
} else {
this.fileObject.status = "exception";
this.$message({
message: "上传失败,失败原因:" + response.responseMsg,
type: 'error'
});
}
this.uploadLoading = false;
this.stopBtn = true;
this.wul_uploader.reset();
this.wul_fileMd5 = "";
this.wul_size = 0;
this.wul_fileName = "";
this.wul_chunk = 0; //当前切片数
}.bind(this)
});
}.bind(this)
});
this.wul_uploader = WebUploader.create({
// swf文件路径
swf: '../js/Uploader.swf',
// 文件接收服务端。
server: this.uploadUrl,
// 定义选择按钮
pick: {
"id": "#" + this.id,
"innerHTML": this.previewName
},
// 自动上传
auto: this.auto,
// 禁止浏览器打开文件
disableGlobalDnd: true,
// 添加截图功能
paste: '#wrapper',
// 定义拖动面板
dnd: '#wrapper',
// 分片上传
chunked: true,
// 分片大小为2M
chunkSize: this.chunkSize,
// 分片上传失败重试次数
chunkRetry: this.chunkRetry,
// 图片不做压缩
compress: false,
// 队列设置10个,为了选择多个文件的时候能提示
fileNumLimit: 10,
// 提前准备好下一个文件
prepareNextFile: true,
// 限制单个文件大小
fileSingleSizeLimit: this.sizeLimit,
//线程数
threads : 1,
// 限制格式
accept: {
title: "access",
extensions: this.ext
}
});
this.wul_init();
}
}
</script>
<style>
/* ----------------Reset Css--------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, input {
margin: 0;
padding: 0;