mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-23 07:41:53 +08:00
v3.8.2 组件ImageUpload支持多图同时选择上传
This commit is contained in:
parent
20bf581acf
commit
582fead405
@ -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() {
|
||||||
|
Loading…
Reference in New Issue
Block a user