From f5a16e4534b815471fdd22edab89a010d492c4aa Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期五, 28 十月 2022 20:13:44 +0800
Subject: [PATCH] 修复使用透明底png图片时，自动填充黑色背景

---
 src/components/ImageUpload/index.vue |   81 ++++++++++++++++++++++------------------
 1 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index adc0428..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"
@@ -105,28 +105,7 @@
     fileList.value = [];
     return [];
   }
-});
-
-// 鍒犻櫎鍥剧墖
-function handleRemove(file, files) {
-  const findex = fileList.value.map(f => f.name).indexOf(file.name);
-  if (findex > -1) {
-    fileList.value.splice(findex, 1);
-    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.concat(uploadList.value);
-    uploadList.value = [];
-    number.value = 0;
-    emit("update:modelValue", listToString(fileList.value));
-    proxy.$modal.closeLoading();
-  }
-}
+},{ deep: true, immediate: true });
 
 // 涓婁紶鍓峫oading鍔犺浇
 function handleBeforeUpload(file) {
@@ -157,7 +136,7 @@
       return false;
     }
   }
-  proxy.$modal.loading("涓婁紶涓�");
+  proxy.$modal.loading("姝ｅ湪涓婁紶鍥剧墖锛岃绋嶅��...");
   number.value++;
 }
 
@@ -166,9 +145,44 @@
   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("涓婁紶澶辫触");
+  proxy.$modal.msgError("涓婁紶鍥剧墖澶辫触");
   proxy.$modal.closeLoading();
 }
 
@@ -183,7 +197,9 @@
   let strs = "";
   separator = separator || ",";
   for (let i in list) {
-    strs += list[i].url.replace(baseUrl, "") + separator;
+    if (undefined !== list[i].url && list[i].url.indexOf("blob:") !== 0) {
+      strs += list[i].url.replace(baseUrl, "") + separator;
+    }
   }
   return strs != "" ? strs.substr(0, strs.length - 1) : "";
 }
@@ -192,15 +208,6 @@
 <style scoped lang="scss">
 // .el-upload--picture-card 鎺у埗鍔犲彿閮ㄥ垎
 :deep(.hide .el-upload--picture-card) {
-  display: none;
-}
-// 鍘绘帀鍔ㄧ敾鏁堟灉
-:deep(.el-list-enter-active),
-:deep(.el-list-leave-active) {
-  transition: all 0s;
-}
-:deep(.el-list-enter, .el-list-leave-active) {
-  opacity: 0;
-  transform: translateY(0);
+    display: none;
 }
 </style>
\ No newline at end of file

--
Gitblit v1.9.3