fix(components): [upload] fileList prop should sync uploadFiles (#6492)

* fix(components): [upload] fileList prop should sync uploadFiles

* fix(components): [upload] fileList prop should sync uploadFiles

* fix: typings

Co-authored-by: 三咲智子 <sxzz@sxzz.moe>

build/type-safe.json

@@ -23,6 +23,7 @@
   "packages/components/slot/",
   "packages/components/tag/",
   "packages/components/teleport/",
+  "packages/components/upload/",
   "packages/constants",
   "packages/element-plus",
   "packages/hooks",

packages/components/upload/src/upload-content.ts

@@ -1,5 +1,5 @@
 import { NOOP } from '@vue/shared'
-import { buildProps, definePropType } from '@element-plus/utils'
+import { buildProps, definePropType, mutable } from '@element-plus/utils'
 import { uploadBaseProps } from './upload'
 
 import type { ExtractPropTypes } from 'vue'
@@ -14,6 +14,13 @@ import type { UploadAjaxError } from './ajax'
 
 export const uploadContentProps = buildProps({
   ...uploadBaseProps,
+
+  // override
+  fileList: {
+    type: definePropType<UploadFile[]>(Array),
+    default: () => mutable([] as const),
+  },
+
   beforeUpload: {
     type: definePropType<UploadHooks['beforeUpload']>(Function),
     default: NOOP,

packages/components/upload/src/upload.ts

@@ -33,12 +33,15 @@ export interface UploadFile {
   name: string
   percentage?: number
   status: UploadStatus
-  size: number
+  size?: number
   response?: unknown
   uid: number
   url?: string
-  raw: UploadRawFile
+  raw?: UploadRawFile
 }
+export type UploadUserFile = Omit<UploadFile, 'status' | 'uid'> &
+  Partial<Pick<UploadFile, 'status' | 'uid'>>
+
 export type UploadFiles = UploadFile[]
 export interface UploadRawFile extends File {
   uid: number
@@ -117,7 +120,7 @@ export const uploadBaseProps = buildProps({
     default: 'select',
   },
   fileList: {
-    type: definePropType<UploadFiles>(Array),
+    type: definePropType<UploadUserFile[]>(Array),
     default: () => mutable([] as const),
   },
   autoUpload: {

packages/components/upload/src/use-handlers.ts

@@ -138,7 +138,7 @@ export const useHandlers = (
   function submit() {
     uploadFiles.value
       .filter(({ status }) => status === 'ready')
-      .forEach(({ raw }) => uploadRef.value?.upload(raw))
+      .forEach(({ raw }) => raw && uploadRef.value?.upload(raw))
   }
 
   watch(
@@ -166,11 +166,12 @@ export const useHandlers = (
     () => props.fileList,
     (fileList) => {
       for (const file of fileList) {
-        file.uid = genFileId()
+        file.uid ||= genFileId()
         file.status ||= 'success'
       }
+      uploadFiles.value = fileList as UploadFiles
     },
-    { immediate: true }
+    { immediate: true, deep: true }
   )
 
   return {