onUploadQueueChange拿不到file信息

[YXYFuture]

Version of antd-mobile

"antd-mobile": "^5.41.1"

Description

import { ImageUploader } from 'antd-mobile';
import React from 'react';

function testDemo() {
const upload = async (file: File) => {
return {
url: URL.createObjectURL(file),
name: file?.name,
file,
};
};

return (
<ImageUploader
upload={upload}
onUploadQueueChange={(task) => {
console.log('task', task);
}}
/>
);
}

export default testDemo;

[dosubot]

Hi @YXYFuture! I'm Dosu and I’m helping the ant-design-mobile team.

onUploadQueueChange 只会返回上传队列的任务状态（UploadTask[]），每个任务只有 id 和 status，并不包含 file 信息，这是组件设计如此，详见官方文档。

如果你需要拿到 file 信息，建议用 onChange 回调，它会返回包含 file、url、name 等信息的 ImageUploadItem[] 列表，可以满足你的需求。onUploadQueueChange 主要用于监听上传队列状态变化，不适合获取文件详情。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[YXYFuture]

onChange拿不到状态信息，只能通过onUploadQueueChange拿状态，但是无法和文件对应起来，这样就没有办法自定义fail、pending的状态显示方式。

[dosubot]

目前 ImageUploader 的 onChange 只返回文件信息，onUploadQueueChange 只返回上传状态（id 和 status），两者没有内建的关联方式，确实无法直接自定义 fail/pending 的状态展示并和文件信息对应起来，这是组件设计上的限制。官方文档 和源码都没有提供 id 与 key 的自动映射。

如果你需要实现自定义状态展示，可以考虑以下思路：

1. 自定义 upload 方法：在 upload 返回的 ImageUploadItem 里加一个 key 字段，值设为当前任务的 id（你可以在 upload 前生成并传递 id），这样 onChange 拿到的列表就能和 onUploadQueueChange 的 id 对应起来。
2. 自定义渲染 renderItem：用 renderItem 渲染每个文件时，结合 onUploadQueueChange 的任务状态和 onChange 的文件列表，通过 key/id 手动关联，实现自定义 fail/pending 状态的展示。
3. 利用 extra 字段：upload 返回的 ImageUploadItem 支持 extra 字段，可以用来存储自定义数据（比如 id 或状态），方便后续关联和展示相关讨论。

目前没有更简单的官方方案，后续版本可能会优化这个设计（比如增加 status 字段或更直接的关联方式）。如果需要更复杂的控制，建议自行管理 fileList 和任务状态，或者自定义上传组件。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}