From 147eb7a9e578a377c794280fa6a8ee572aae7109 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子li <15040126243@163.com> Date: 星期一, 28 二月 2022 12:10:55 +0800 Subject: [PATCH] update 图片上传 文件上传 支持并发上传 --- ruoyi-ui/src/components/ImageUpload/index.vue | 42 +++++++++++++++++++++--------------------- 1 files changed, 21 insertions(+), 21 deletions(-) diff --git a/ruoyi-ui/src/components/ImageUpload/index.vue b/ruoyi-ui/src/components/ImageUpload/index.vue index fcf010d..11573dd 100644 --- a/ruoyi-ui/src/components/ImageUpload/index.vue +++ b/ruoyi-ui/src/components/ImageUpload/index.vue @@ -1,6 +1,7 @@ <template> <div class="component-upload-image"> <el-upload + multiple :action="uploadImgUrl" list-type="picture-card" :on-success="handleUploadSuccess" @@ -18,7 +19,7 @@ > <i class="el-icon-plus"></i> </el-upload> - + <!-- 涓婁紶鎻愮ず --> <div class="el-upload__tip" slot="tip" v-if="showTip"> 璇蜂笂浼� @@ -70,6 +71,8 @@ }, data() { return { + number: 0, + uploadList: [], dialogImageUrl: "", dialogVisible: false, hideUpload: false, @@ -121,12 +124,17 @@ // 涓婁紶鎴愬姛鍥炶皟 handleUploadSuccess(res) { if (res.code == 200) { - this.fileList.push({ name: res.data.fileName, url: res.data.url }); - this.$emit("input", this.listToString(this.fileList)); - this.loading.close(); + this.uploadList.push({ name: res.data.fileName, url: res.data.url }); + if (this.uploadList.length === this.number) { + this.fileList = this.fileList.concat(this.uploadList); + this.uploadList = []; + this.number = 0; + this.$emit("input", this.listToString(this.fileList)); + this.$modal.closeLoading(); + } } else { - this.$message.error(res.msg); - this.loading.close(); + this.$modal.msgError(res.msg); + this.$modal.closeLoading(); } }, // 涓婁紶鍓峫oading鍔犺浇 @@ -147,35 +155,27 @@ } if (!isImg) { - this.$message.error( - `鏂囦欢鏍煎紡涓嶆纭�, 璇蜂笂浼�${this.fileType.join("/")}鍥剧墖鏍煎紡鏂囦欢!` - ); + this.$modal.msgError(`鏂囦欢鏍煎紡涓嶆纭�, 璇蜂笂浼�${this.fileType.join("/")}鍥剧墖鏍煎紡鏂囦欢!`); return false; } if (this.fileSize) { const isLt = file.size / 1024 / 1024 < this.fileSize; if (!isLt) { - this.$message.error(`涓婁紶澶村儚鍥剧墖澶у皬涓嶈兘瓒呰繃 ${this.fileSize} MB!`); + this.$modal.msgError(`涓婁紶澶村儚鍥剧墖澶у皬涓嶈兘瓒呰繃 ${this.fileSize} MB!`); return false; } } - this.loading = this.$loading({ - lock: true, - text: "涓婁紶涓�", - background: "rgba(0, 0, 0, 0.7)", - }); + this.$modal.loading("姝e湪涓婁紶鍥剧墖锛岃绋嶅��..."); + this.number++; }, // 鏂囦欢涓暟瓒呭嚭 handleExceed() { - this.$message.error(`涓婁紶鏂囦欢鏁伴噺涓嶈兘瓒呰繃 ${this.limit} 涓�!`); + this.$modal.msgError(`涓婁紶鏂囦欢鏁伴噺涓嶈兘瓒呰繃 ${this.limit} 涓�!`); }, // 涓婁紶澶辫触 handleUploadError(res) { - this.$message({ - type: "error", - message: "涓婁紶澶辫触", - }); - this.loading.close(); + this.$modal.msgError("涓婁紶鍥剧墖澶辫触锛岃閲嶈瘯"); + this.$modal.closeLoading(); }, // 棰勮 handlePictureCardPreview(file) { -- Gitblit v1.9.3