v3.8.2 组件ImageUpload支持多图同时选择上传

This commit is contained in:
YunaiV 2022-03-20 22:04:51 +08:00
parent 20bf581acf
commit 582fead405

View File

@ -1,6 +1,7 @@
<template> <template>
<div class="component-upload-image"> <div class="component-upload-image">
<el-upload <el-upload
multiple
:action="uploadImgUrl" :action="uploadImgUrl"
list-type="picture-card" list-type="picture-card"
:on-success="handleUploadSuccess" :on-success="handleUploadSuccess"
@ -70,6 +71,8 @@ export default {
}, },
data() { data() {
return { return {
number: 0,
uploadList: [],
dialogImageUrl: "", dialogImageUrl: "",
dialogVisible: false, dialogVisible: false,
hideUpload: false, hideUpload: false,
@ -124,9 +127,14 @@ export default {
}, },
// //
handleUploadSuccess(res) { handleUploadSuccess(res) {
this.fileList.push({ name: res.fileName, url: res.fileName }); this.uploadList.push({ name: res.fileName, url: res.fileName });
this.$emit("input", this.listToString(this.fileList)); if (this.uploadList.length === this.number) {
this.loading.close(); this.fileList = this.fileList.concat(this.uploadList);
this.uploadList = [];
this.number = 0;
this.$emit("input", this.listToString(this.fileList));
this.loading.close();
}
}, },
// loading // loading
handleBeforeUpload(file) { handleBeforeUpload(file) {
@ -163,6 +171,7 @@ export default {
text: "上传中", text: "上传中",
background: "rgba(0, 0, 0, 0.7)", background: "rgba(0, 0, 0, 0.7)",
}); });
this.number++;
}, },
// //
handleExceed() { handleExceed() {