From 729524e7844d0bb6682f4659b7c534f744305dff Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Sun, 2 Feb 2025 23:16:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E4=B8=8A=E4=BC=A0=E6=88=90?=
 =?UTF-8?q?=E5=8A=9F=E4=B9=8B=E5=90=8E=E5=AF=BC=E8=87=B4=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=88=B7=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Upload/MultiImageUpload.vue | 36 ++++++++++------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/components/Upload/MultiImageUpload.vue b/src/components/Upload/MultiImageUpload.vue
index 4a790079..6dc39b32 100644
--- a/src/components/Upload/MultiImageUpload.vue
+++ b/src/components/Upload/MultiImageUpload.vue
@@ -93,28 +93,17 @@ const modelValue = defineModel("modelValue", {
 
 const fileList = ref<UploadUserFile[]>([]);
 
-// 监听 modelValue 转换用于显示的 fileList
-watch(
-  modelValue,
-  (value) => {
-    console.log("modelValue 发生变化:", value);
-    fileList.value = value.map((url) => {
-      return {
-        url,
-      } as UploadUserFile;
-    });
-  },
-  {
-    immediate: true,
-  }
-);
-
 /**
  * 删除图片
  */
 function handleRemove(imageUrl: string) {
   FileAPI.delete(imageUrl).then(() => {
-    modelValue.value = modelValue.value.filter((url) => url !== imageUrl);
+    const index = modelValue.value.indexOf(imageUrl);
+    if (index !== -1) {
+      // 直接修改数组避免触发整体更新
+      modelValue.value.splice(index, 1);
+      fileList.value.splice(index, 1); // 同步更新 fileList
+    }
   });
 }
 
@@ -187,9 +176,14 @@ function handleExceed(files: File[], uploadFiles: UploadUserFile[]) {
 /**
  * 上传成功回调
  */
-const handleSuccess = (fileInfo: FileInfo) => {
+const handleSuccess = (fileInfo: FileInfo, uploadFile: UploadUserFile) => {
   ElMessage.success("上传成功");
-  modelValue.value = [...modelValue.value, fileInfo.url];
+  const index = fileList.value.findIndex((file) => file.uid === uploadFile.uid);
+  if (index !== -1) {
+    fileList.value[index].url = fileInfo.url;
+    fileList.value[index].status = "success";
+    modelValue.value[index] = fileInfo.url;
+  }
 };
 
 /**
@@ -214,5 +208,9 @@ const handlePreviewImage = (imageUrl: string) => {
 const handlePreviewClose = () => {
   previewVisible.value = false;
 };
+
+onMounted(() => {
+  fileList.value = modelValue.value.map((url) => ({ url }) as UploadUserFile);
+});
 </script>
 <style lang="scss" scoped></style>