From fabc195e90d5a394b5089bf88305ea43eb791c04 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: Wed, 24 Aug 2022 13:40: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

---
 src/components/FileUpload/index.vue  | 29 ++++++++++----
 src/components/ImageUpload/index.vue | 56 ++++++++++++++++++----------
 2 files changed, 58 insertions(+), 27 deletions(-)

diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
index 53fc381..d3a0b97 100644
--- a/src/components/FileUpload/index.vue
+++ b/src/components/FileUpload/index.vue
@@ -12,7 +12,7 @@
       :show-file-list="false"
       :headers="headers"
       class="upload-file-uploader"
-      ref="upload"
+      ref="fileUpload"
     >
       <!-- 上传按钮 -->
       <el-button type="primary">选取文件</el-button>
@@ -139,13 +139,15 @@ function handleUploadError(err) {
 
 // 上传成功回调
 function handleUploadSuccess(res, file) {
-  uploadList.value.push({ name: res.fileName, url: res.fileName });
-  if (uploadList.value.length === number.value) {
-    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
-    uploadList.value = [];
-    number.value = 0;
-    emit("update:modelValue", listToString(fileList.value));
+  if (res.code === 200) {
+    uploadList.value.push({ name: res.fileName, url: res.fileName });
+    uploadedSuccessfully();
+  } else {
+    number.value--;
     proxy.$modal.closeLoading();
+    proxy.$modal.msgError(res.msg);
+    proxy.$refs.fileUpload.handleRemove(file);
+    uploadedSuccessfully();
   }
 }
 
@@ -155,6 +157,17 @@ function handleDelete(index) {
   emit("update:modelValue", listToString(fileList.value));
 }
 
+// 上传结束处理
+function uploadedSuccessfully() {
+  if (number.value > 0 && uploadList.value.length === number.value) {
+    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
+    uploadList.value = [];
+    number.value = 0;
+    emit("update:modelValue", listToString(fileList.value));
+    proxy.$modal.closeLoading();
+  }
+}
+
 // 获取文件名称
 function getFileName(name) {
   if (name.lastIndexOf("/") > -1) {
@@ -169,7 +182,7 @@ function listToString(list, separator) {
   let strs = "";
   separator = separator || ",";
   for (let i in list) {
-    if(undefined !== list[i].url) {
+    if (list[i].url) {
       strs += list[i].url + separator;
     }
   }
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index 7580438..149524b 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -9,8 +9,8 @@
       :limit="limit"
       :on-error="handleUploadError"
       :on-exceed="handleExceed"
-      name="file"
-      :on-remove="handleRemove"
+      ref="imageUpload"
+      :before-remove="handleDelete"
       :show-file-list="true"
       :headers="headers"
       :file-list="fileList"
@@ -107,23 +107,6 @@ watch(() => props.modelValue, val => {
   }
 },{ deep: true, immediate: true });
 
-// 删除图片
-function handleRemove(file, files) {
-  emit("update:modelValue", listToString(fileList.value));
-}
-
-// 上传成功回调
-function handleUploadSuccess(res) {
-  uploadList.value.push({ name: res.fileName, url: res.fileName });
-  if (uploadList.value.length === number.value) {
-    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
-    uploadList.value = [];
-    number.value = 0;
-    emit("update:modelValue", listToString(fileList.value));
-    proxy.$modal.closeLoading();
-  }
-}
-
 // 上传前loading加载
 function handleBeforeUpload(file) {
   let isImg = false;
@@ -162,6 +145,41 @@ function handleExceed() {
   proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
 }
 
+// 上传成功回调
+function handleUploadSuccess(res, file) {
+  if (res.code === 200) {
+    uploadList.value.push({ name: res.fileName, url: res.fileName });
+    uploadedSuccessfully();
+  } else {
+    number.value--;
+    proxy.$modal.closeLoading();
+    proxy.$modal.msgError(res.msg);
+    proxy.$refs.imageUpload.handleRemove(file);
+    uploadedSuccessfully();
+  }
+}
+
+// 删除图片
+function handleDelete(file) {
+  const findex = fileList.value.map(f => f.name).indexOf(file.name);
+  if (findex > -1 && uploadList.value.length === number.value) {
+    fileList.value.splice(findex, 1);
+    emit("update:modelValue", listToString(fileList.value));
+    return false;
+  }
+}
+
+// 上传结束处理
+function uploadedSuccessfully() {
+  if (number.value > 0 && uploadList.value.length === number.value) {
+    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
+    uploadList.value = [];
+    number.value = 0;
+    emit("update:modelValue", listToString(fileList.value));
+    proxy.$modal.closeLoading();
+  }
+}
+
 // 上传失败
 function handleUploadError() {
   proxy.$modal.msgError("上传图片失败");