From abd902acd2370c59efcf98599595e97202e812a1 Mon Sep 17 00:00:00 2001
From: msidolphin <msidolphin@outlook.com>
Date: Mon, 12 Jul 2021 11:03:00 +0800
Subject: [PATCH] fix: upload file-list is updated but without re-rendered
 (#2405) (#2460)

---
 packages/upload/src/upload-list.vue |  2 +-
 packages/upload/src/useHandlers.ts  | 22 ++++++++--------------
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/packages/upload/src/upload-list.vue b/packages/upload/src/upload-list.vue
index 1deba09cf2..bb1595ec5f 100644
--- a/packages/upload/src/upload-list.vue
+++ b/packages/upload/src/upload-list.vue
@@ -10,7 +10,7 @@
   >
     <li
       v-for="file in files"
-      :key="file"
+      :key="file.uid || file"
       :class="['el-upload-list__item', 'is-' + file.status, focusing ? 'focusing' : '']"
       tabindex="0"
       @keydown.delete="!disabled && handleRemove($event, file)"
diff --git a/packages/upload/src/useHandlers.ts b/packages/upload/src/useHandlers.ts
index 80567ef5c9..9c61084165 100644
--- a/packages/upload/src/useHandlers.ts
+++ b/packages/upload/src/useHandlers.ts
@@ -1,7 +1,6 @@
 
 import { ref, watch } from 'vue'
 import { NOOP } from '@vue/shared'
-import isEqual from 'lodash/isEqual'
 import cloneDeep from 'lodash/cloneDeep'
 
 // Inline types
@@ -21,7 +20,6 @@ function genUid(seed: number) {
 
 export default (props: IUseHandlersProps) => {
 
-  let cachedFiles: UploadFile[] = []
   const uploadFiles = ref<UploadFile[]>([])
   const uploadRef = ref<UploadRef>(null)
 
@@ -131,18 +129,14 @@ export default (props: IUseHandlersProps) => {
   })
 
   watch(() => props.fileList, (fileList: UploadFile[]) => {
-    if(!isEqual(cachedFiles, fileList)){
-      cachedFiles = []
-      uploadFiles.value = fileList.map(file => {
-        const cloneFile = cloneDeep(file)
-        cachedFiles.push(cloneFile)
-        return {
-          ...cloneFile,
-          uid: file.uid || genUid(tempIndex++),
-          status: file.status || 'success',
-        }
-      })
-    }
+    uploadFiles.value = fileList.map(file => {
+      const cloneFile = cloneDeep(file)
+      return {
+        ...cloneFile,
+        uid: file.uid || genUid(tempIndex++),
+        status: file.status || 'success',
+      }
+    })
   }, {
     immediate: true,
     deep: true,