Repository: ant-design/ant-design-mobile (ts)

Issue:
ImageUploader 限制图片数量时的上传问题
### Version of antd-mobile

5.25.1

### Operating system and its version

_No response_

### Browser and its version

Chrome 107

### Sandbox to reproduce

官网 - 限制图片数量 https://mobile.ant.design/zh/components/image-uploader

### What happened?

1. 上传第一张图片
2. 在"上传中..."时候，点击上传按钮，上传第二张图片
3. 结果，第二张图片不显示

### Relevant log output

_No response_

Pull request:
fix(ImageUploader): upload failure due to duplicate tasks and value
fix #5833

原因 https://github.com/ant-design/ant-design-mobile/issues/5833#issuecomment-1334867453 说的很清楚了

不过这个 case 测试用例不太好加 - - 

Patch:
diff --git a/src/components/image-uploader/image-uploader.tsx b/src/components/image-uploader/image-uploader.tsx
index 3612aca87..ebe244900 100644
--- a/src/components/image-uploader/image-uploader.tsx
+++ b/src/components/image-uploader/image-uploader.tsx
@@ -298,34 +298,33 @@ export const ImageUploader: FC<ImageUploaderProps> = p => {
           />
         )
       })}
-      {showUpload && (
-        <div className={`${classPrefix}-upload-button-wrap`}>
-          {props.children ? (
-            props.children
-          ) : (
-            <span
-              className={`${classPrefix}-cell ${classPrefix}-upload-button`}
-              role='button'
-              aria-label={locale.ImageUploader.upload}
-            >
-              <span className={`${classPrefix}-upload-button-icon`}>
-                <AddOutline />
-              </span>
+      <div
+        className={`${classPrefix}-upload-button-wrap`}
+        style={showUpload ? undefined : { display: 'none' }}
+      >
+        {props.children || (
+          <span
+            className={`${classPrefix}-cell ${classPrefix}-upload-button`}
+            role='button'
+            aria-label={locale.ImageUploader.upload}
+          >
+            <span className={`${classPrefix}-upload-button-icon`}>
+              <AddOutline />
             </span>
-          )}
-          {!props.disableUpload && (
-            <input
-              capture={props.capture}
-              accept={props.accept}
-              multiple={props.multiple}
-              type='file'
-              className={`${classPrefix}-input`}
-              onChange={onChange}
-              aria-hidden
-            />
-          )}
-        </div>
-      )}
+          </span>
+        )}
+        {!props.disableUpload && (
+          <input
+            capture={props.capture}
+            accept={props.accept}
+            multiple={props.multiple}
+            type='file'
+            className={`${classPrefix}-input`}
+            onChange={onChange}
+            aria-hidden
+          />
+        )}
+      </div>
     </>
   )
 


Test patch:
diff --git a/src/components/image-uploader/tests/image-uploader.test.tsx b/src/components/image-uploader/tests/image-uploader.test.tsx
index 52333ebf4..e37acb639 100644
--- a/src/components/image-uploader/tests/image-uploader.test.tsx
+++ b/src/components/image-uploader/tests/image-uploader.test.tsx
@@ -159,7 +159,9 @@ describe('ImageUploader', () => {
     })
 
     expect(fn.mock.calls[0][0]).toBe(1)
-    expect($$(`.${classPrefix}-upload-button`).length).toBe(0)
+    expect($$(`.${classPrefix}-upload-button-wrap`)[0]).toHaveStyle(
+      'display: none'
+    )
   })
 
   test('delete image', async () => {
@@ -316,4 +318,20 @@ describe('ImageUploader', () => {
 
     expect(fn).toBeCalledTimes(1)
   })
+
+  test('task change', async () => {
+    const fn = jest.fn()
+    render(<App upload={mockUpload} onUploadQueueChange={fn} />)
+    mockInputFile()
+    expect(fn.mock.lastCall[0]).toMatchObject([])
+    await act(async () => {
+      jest.runAllTimers()
+    })
+    expect(fn.mock.lastCall[0]).toMatchObject([{ id: 0, status: 'pending' }])
+    await act(async () => {
+      jest.runAllTimers()
+    })
+    expect(fn).toBeCalledWith([{ id: 0, status: 'success' }])
+    expect(fn.mock.lastCall[0]).toMatchObject([])
+  })
 })