HTML代码如下:
<Upload multiple
type="drag"
ref="upload"
:show-upload-list="true"
:default-file-list="defaultList"
:before-upload="handleUpload"
:on-remove="handleRemove"
:on-preview="handlePreview"
:on-format-error="handleFormatError"
:on-success="handleSuccess"
action="xxx"
:format="uploadFormat"
style="width: calc(100% - 100px);"
>
<div style="padding: 20px 0">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<p>点击或拖拽上传附件(附件内容需盖公章)</p>
</div>
</Upload>
JS 代码如下:
handleUpload(file) {
// 清空文件列表
let self = this;
self.$refs.upload.clearFiles();
let formData = new FormData();
formData.append("file", file);
// 显示列表
self.showUploadList = true;
self.file = file;
},
// 移除文件时的钩子
handleRemove(file, fileList) {
const List = this.defaultList;
let _index = List.findIndex(t => { return t.uid == file.uid })
if (_index != -1) {
this.defaultList.splice(_index, 1);
}
},
handlePreview(file) {
let self = this;
self.$viewerApi({
images: [file.isBase64],
options: {
title: false,
toolbar: true,
},
});
},
handleSuccess(res, file, fileList) {
let data = res[0];
this.uploadList.push(data);
this.showUploadList = false;
this.$refs.upload.fileList = [];
},
handleFormatError(file) {
this.$Notice.warning({
title: "文件格式不正确",
desc: "文件 " + file.name + " 格式不正确,请上传.xls,.xlsx文件。",
});
},
后端代码如下:
// 获取文件
async uploadData() {
const ctx = this.ctx
const parts = ctx.multipart();
let part, baseDir = this.config.gyyqyd.fileSrc
let ID = "", target = "", filename, saveFile = ""
try {
while ((part = await parts()) != null) {
if (part.length) {
console.log(part)
// if (part[0] == "ID") {
// //从客户端传回来的属性
// ID = part[1];
// }
} else {
if (!part.filename) {
// 这时是用户没有选择文件就点击了上传(part 是 file stream,但是 part.filename 为空)
// 需要做出处理,例如给出错误提示消息
return { state: 0, msg: "文件出错!" }
}
filename = part.filename;
saveFile = `fileupload/${filename}`
target = path.join(baseDir, saveFile); //文件路径
global.Helper.File.ensurePath(target); //返回 path 的目录名
await global.Helper.Stream.savefileAsyc(part, target);
}
}
} catch (error) {
}
return
}