fix(uploader): 修复选择多个文件上传只会上传一个文件的问题

zhuddan · zhuddan · commit a3251a2e9e2e · 2024-12-02T09:46:06.000+08:00
- 修复了 readFile 方法中多文件处理的缺陷
- 调整文件读取逻辑，确保所有选中的文件都能正确处理
diff --git a/src/packages/uploader/uploader.taro.tsx b/src/packages/uploader/uploader.taro.tsx
@@ -387,6 +387,7 @@ const InternalUploader: ForwardRefRenderFunction<
   }
 
   const readFile = <T extends TFileType>(files: T[]) => {
+    const results: FileItem[] = []
     files.forEach((file: T, index: number) => {
       let fileType = file.type
       const filepath = (file.tempFilePath || file.path) as string
@@ -428,8 +429,9 @@ const InternalUploader: ForwardRefRenderFunction<
         fileItem.url = fileType === 'video' ? file.thumbTempFilePath : filepath
       }
       executeUpload(fileItem, index)
-      setFileList([...fileList, fileItem])
+      results.push(fileItem)
     })
+    setFileList([...fileList, ...results])
   }
 
   const filterFiles = <T extends TFileType>(files: T[]) => {
diff --git a/src/packages/uploader/uploader.tsx b/src/packages/uploader/uploader.tsx
@@ -288,6 +288,7 @@ const InternalUploader: ForwardRefRenderFunction<
   }
 
   const readFile = (files: File[]) => {
+    const results: FileItem[] = []
     files.forEach((file: File, index: number) => {
       const formData = new FormData()
       formData.append(name, file)
@@ -306,13 +307,15 @@ const InternalUploader: ForwardRefRenderFunction<
         const reader = new FileReader()
         reader.onload = (event: ProgressEvent<FileReader>) => {
           fileItem.url = (event.target as FileReader).result as string
-          setFileList([...fileList, fileItem])
+          // setFileList([...fileList, fileItem])
+          results.push(fileItem)
         }
         reader.readAsDataURL(file)
       } else {
-        setFileList([...fileList, fileItem])
+        results.push(fileItem)
       }
     })
+    setFileList([...fileList, ...results])
   }
 
   const filterFiles = (files: File[]) => {

Original file line number	Diff line number	Diff line change
`@@ -387,6 +387,7 @@ const InternalUploader: ForwardRefRenderFunction<`
`387`	`387`	`}`
`388`	`388`
`389`	`389`	`const readFile = <T extends TFileType>(files: T[]) => {`
	`390`	`+ const results: FileItem[] = []`
`390`	`391`	`files.forEach((file: T, index: number) => {`
`391`	`392`	`let fileType = file.type`
`392`	`393`	`const filepath = (file.tempFilePath \|\| file.path) as string`
`@@ -428,8 +429,9 @@ const InternalUploader: ForwardRefRenderFunction<`
`428`	`429`	`fileItem.url = fileType === 'video' ? file.thumbTempFilePath : filepath`
`429`	`430`	`}`
`430`	`431`	`executeUpload(fileItem, index)`
`431`		`- setFileList([...fileList, fileItem])`
	`432`	`+ results.push(fileItem)`
`432`	`433`	`})`
	`434`	`+ setFileList([...fileList, ...results])`
`433`	`435`	`}`
`434`	`436`
`435`	`437`	`const filterFiles = <T extends TFileType>(files: T[]) => {`
Original file line number	Diff line number	Diff line change
`@@ -288,6 +288,7 @@ const InternalUploader: ForwardRefRenderFunction<`
`288`	`288`	`}`
`289`	`289`
`290`	`290`	`const readFile = (files: File[]) => {`
	`291`	`+ const results: FileItem[] = []`
`291`	`292`	`files.forEach((file: File, index: number) => {`
`292`	`293`	`const formData = new FormData()`
`293`	`294`	`formData.append(name, file)`
`@@ -306,13 +307,15 @@ const InternalUploader: ForwardRefRenderFunction<`
`306`	`307`	`const reader = new FileReader()`
`307`	`308`	`reader.onload = (event: ProgressEvent<FileReader>) => {`
`308`	`309`	`fileItem.url = (event.target as FileReader).result as string`
`309`		`- setFileList([...fileList, fileItem])`
	`310`	`+ // setFileList([...fileList, fileItem])`
	`311`	`+ results.push(fileItem)`
`310`	`312`	`}`
`311`	`313`	`reader.readAsDataURL(file)`
`312`	`314`	`} else {`
`313`		`- setFileList([...fileList, fileItem])`
	`315`	`+ results.push(fileItem)`
`314`	`316`	`}`
`315`	`317`	`})`
	`318`	`+ setFileList([...fileList, ...results])`
`316`	`319`	`}`
`317`	`320`
`318`	`321`	`const filterFiles = (files: File[]) => {`