fix: 缺少响应参数id的问题

packages/upload-list/index.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: zhaojinfeng 121016171@qq.com
  * @Date: 2023-08-16 17:33:41
- * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-08-22 14:16:22
+ * @LastEditors: peerless_hero peerless_hero@outlook.com
+ * @LastEditTime: 2023-08-30 15:24:13
  * @FilePath: \vue3\packages\upload-list\index.vue
  * @Description:
  *
@@ -14,6 +14,8 @@
     :disabled="disabled"
     :before-upload="beforeUpload"
     :http-request="httpRequest"
+    @preview="preview"
+    @success="success"
     @remove="remove"
   >
     <slot>
@@ -49,6 +51,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   (event: 'update:file-list', file: FileVO[]): void
+  (event: 'preview', file: UploadFile): void
 }>()
 
 const userFiles = ref<UploadUserFile[]>([])
@@ -79,19 +82,36 @@ async function httpRequest({ file, onProgress, onSuccess, onError }: UploadReque
   }
 }
 
-userFiles.value = props.fileList.map(file => ({
+function preview(uploadFile: UploadFile) {
+  emit('preview', uploadFile)
+}
+
+const { pause, resume } = watchPausable(
+  () => props.fileList, (fileList) => {
+    userFiles.value = fileList.map(file => ({
       ...file,
       status: 'success',
       percentage: 100,
       uid: file.id,
     }))
+  },
+  { immediate: true },
+)
+
+function success(response: FileVO, uploadFile: UploadFile, uploadFiles: UploadFiles) {
+  // 将返回响应合并到文件上
+  Object.assign(uploadFile, response)
+  // 手动更新，暂停监听，避免因props.fileList更新再次更新uploadFile
+  pause()
+  emit('update:file-list', uploadFiles)
+  resume()
+}
 
 function remove(_uploadFile: UploadFile, uploadFiles: UploadFiles) {
   userFiles.value = uploadFiles
+  // 手动更新，暂停监听，避免因props.fileList更新再次更新uploadFile
+  pause()
   emit('update:file-list', uploadFiles)
+  resume()
 }
-
-watch(() => userFiles.value, (uploadFiles) => {
-  emit('update:file-list', uploadFiles)
-})
 </script>