From 39efed17102745750cd339c19b06e01b2e9d798d Mon Sep 17 00:00:00 2001 From: RuoYi Date: Wed, 24 Aug 2022 11:18:52 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=A4=9A=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=8A=A5=E9=94=99=E5=87=BA=E7=8E=B0=E7=9A=84?= =?UTF-8?q?=E5=BC=82=E5=B8=B8=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/components/FileUpload/index.vue | 28 ++++++--- ruoyi-ui/src/components/ImageUpload/index.vue | 58 ++++++++++++------- 2 files changed, 56 insertions(+), 30 deletions(-) diff --git a/ruoyi-ui/src/components/FileUpload/index.vue b/ruoyi-ui/src/components/FileUpload/index.vue index aa2296b9..4e94cb0c 100644 --- a/ruoyi-ui/src/components/FileUpload/index.vue +++ b/ruoyi-ui/src/components/FileUpload/index.vue @@ -12,7 +12,7 @@ :show-file-list="false" :headers="headers" class="upload-file-uploader" - ref="upload" + ref="fileUpload" > 选取文件 @@ -151,14 +151,16 @@ export default { this.$modal.closeLoading() }, // 上传成功回调 - handleUploadSuccess(res) { - this.uploadList.push({ name: res.fileName, url: res.fileName }); - 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)); + handleUploadSuccess(res, file) { + if (res.code === 200) { + this.uploadList.push({ name: res.fileName, url: res.fileName }); + this.uploadedSuccessfully(); + } else { + this.number--; this.$modal.closeLoading(); + this.$modal.msgError(res.msg); + this.$refs.fileUpload.handleRemove(file); + this.uploadedSuccessfully(); } }, // 删除文件 @@ -166,6 +168,16 @@ export default { this.fileList.splice(index, 1); this.$emit("input", this.listToString(this.fileList)); }, + // 上传结束处理 + uploadedSuccessfully() { + if (this.number > 0 && 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(); + } + }, // 获取文件名称 getFileName(name) { if (name.lastIndexOf("/") > -1) { diff --git a/ruoyi-ui/src/components/ImageUpload/index.vue b/ruoyi-ui/src/components/ImageUpload/index.vue index 71172c1f..e0140f5f 100644 --- a/ruoyi-ui/src/components/ImageUpload/index.vue +++ b/ruoyi-ui/src/components/ImageUpload/index.vue @@ -9,8 +9,8 @@ :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed" - name="file" - :on-remove="handleRemove" + ref="imageUpload" + :on-remove="handleDelete" :show-file-list="true" :headers="headers" :file-list="fileList" @@ -117,25 +117,6 @@ export default { }, }, methods: { - // 删除图片 - handleRemove(file, fileList) { - const findex = this.fileList.map(f => f.name).indexOf(file.name); - if(findex > -1) { - this.fileList.splice(findex, 1); - this.$emit("input", this.listToString(this.fileList)); - } - }, - // 上传成功回调 - handleUploadSuccess(res) { - this.uploadList.push({ name: res.fileName, url: res.fileName }); - 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(); - } - }, // 上传前loading加载 handleBeforeUpload(file) { let isImg = false; @@ -171,11 +152,42 @@ export default { handleExceed() { this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`); }, + // 上传成功回调 + handleUploadSuccess(res, file) { + if (res.code === 200) { + this.uploadList.push({ name: res.fileName, url: res.fileName }); + this.uploadedSuccessfully(); + } else { + this.number--; + this.$modal.closeLoading(); + this.$modal.msgError(res.msg); + this.$refs.imageUpload.handleRemove(file); + this.uploadedSuccessfully(); + } + }, + // 删除图片 + handleDelete(file) { + const findex = this.fileList.map(f => f.name).indexOf(file.name); + if(findex > -1) { + this.fileList.splice(findex, 1); + this.$emit("input", this.listToString(this.fileList)); + } + }, // 上传失败 handleUploadError() { this.$modal.msgError("上传图片失败,请重试"); this.$modal.closeLoading(); }, + // 上传结束处理 + uploadedSuccessfully() { + if (this.number > 0 && 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(); + } + }, // 预览 handlePictureCardPreview(file) { this.dialogImageUrl = file.url; @@ -186,7 +198,9 @@ export default { let strs = ""; separator = separator || ","; for (let i in list) { - strs += list[i].url.replace(this.baseUrl, "") + separator; + if (list[i].url) { + strs += list[i].url.replace(this.baseUrl, "") + separator; + } } return strs != '' ? strs.substr(0, strs.length - 1) : ''; }