fix(uploader): beforeUpload failed to work (#3219)

* fix(uploader): beforeUpload failed to work

* fix(uploader): add unit tests

Author: Miles-hxy

src/packages/uploader/__tests__/uploader.spec.tsx

@@ -453,3 +453,63 @@ test('preview component', () => {
   )
   expect(clickFunc).toBeCalled()
 })
+test('should handle beforeUpload function', async () => {
+  const handleUpload = vi.fn()
+  const beforeUpload = vi.fn((files) => {
+    // 只允许 PNG 文件通过
+    return files.filter((file) => file.type === 'image/png')
+  })
+
+  const { container } = render(
+    <Uploader
+      upload={(file: File) => handleUpload(file)}
+      beforeUpload={beforeUpload}
+    />
+  )
+
+  const pngFile = new File([new ArrayBuffer(10000)], 'test.png', {
+    type: 'image/png',
+  })
+  const jpgFile = new File([new ArrayBuffer(10000)], 'test.jpg', {
+    type: 'image/jpeg',
+  })
+
+  const input: any = container.querySelector('input')
+
+  // 测试单个 PNG 文件上传
+  await fireEvent.change(input, { target: { files: [pngFile] } })
+  expect(beforeUpload).toHaveBeenCalledTimes(1)
+  expect(handleUpload).toHaveBeenCalledWith(pngFile)
+
+  // 测试单个 JPG 文件被过滤
+  await fireEvent.change(input, { target: { files: [jpgFile] } })
+  expect(beforeUpload).toHaveBeenCalledTimes(2)
+  expect(handleUpload).not.toHaveBeenCalledWith(jpgFile)
+
+  // 测试多文件上传时的过滤
+  await fireEvent.change(input, { target: { files: [pngFile, jpgFile] } })
+  expect(beforeUpload).toHaveBeenCalledTimes(3)
+  expect(handleUpload).toHaveBeenCalledTimes(2) // 只有 PNG 文件被上传
+})
+
+test('should handle beforeUpload returning empty array', async () => {
+  const handleUpload = vi.fn()
+  const beforeUpload = vi.fn(() => [])
+
+  const { container } = render(
+    <Uploader
+      upload={(file: File) => handleUpload(file)}
+      beforeUpload={beforeUpload}
+    />
+  )
+
+  const file = new File([new ArrayBuffer(10000)], 'test.txt', {
+    type: 'text/plain',
+  })
+
+  const input: any = container.querySelector('input')
+  await fireEvent.change(input, { target: { files: [file] } })
+
+  expect(beforeUpload).toHaveBeenCalled()
+  expect(handleUpload).not.toHaveBeenCalled()
+})

src/packages/uploader/demos/h5/demo1.tsx

@@ -7,7 +7,6 @@ const Demo1 = () => {
     {
       url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
       uid: 133,
-      status: 'uploading',
     },
   ])
 

src/packages/uploader/uploader.taro.tsx

@@ -314,16 +314,19 @@ const InternalUploader: ForwardRefRenderFunction<
   }
 
   const onChangeImage = async (res: Taro.chooseImage.SuccessCallbackResult) => {
-    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
     const { tempFiles } = res
     const _files: Taro.chooseImage.ImageFile[] = filterFiles(tempFiles)
-    let files: File[] = []
-    const filesArr = new Array<File>().slice.call(files)
     if (beforeUpload) {
-      files = await beforeUpload(filesArr)
+      beforeUpload(new Array<File>().slice.call(_files)).then(
+        (f: Array<File> | boolean) => {
+          const _files: File[] = filterFiles(new Array<File>().slice.call(f))
+          if (!_files.length) res.tempFiles = []
+          readFile(_files)
+        }
+      )
+    } else {
+      readFile(_files)
     }
-    files = filterFiles(filesArr)
-    readFile(_files)
   }
 
   const handleItemClick = (file: UploaderFileItem, index: number) => {

src/packages/uploader/uploader.tsx

@@ -163,9 +163,14 @@ const InternalUploader: ForwardRefRenderFunction<
     const filesArr = new Array<File>().slice.call(files)
     if (beforeUpload) {
       _files = await beforeUpload(filesArr)
-      if (!_files.length) $el.value = ''
+      if (!_files.length) {
+        $el.value = ''
+        return
+      }
+    } else {
+      _files = filesArr
     }
-    _files = filterFiles(filesArr)
+    _files = filterFiles(_files)
 
     const tasks = _files.map((file) => {
       const info: any = {