ant-design-mobile 图片上传组件多图上传异常问题解析

问题背景

在使用 ant-design-mobile 的 ImageUploader 组件进行多图上传时，开发者发现了一个影响用户体验的问题：当同时上传多张图片时，如果其中某一张图片上传失败，组件会立即触发 onChange 事件，导致开发者只能获取到部分成功上传的图片数据，而无法获取完整的最终上传结果。

问题现象

具体表现为：

1. 设置 multiple 属性允许上传多张图片
2. 用户选择多张图片后开始批量上传
3. 上传过程中某张图片因接口问题上传失败
4. 组件立即触发 onChange 事件
5. 开发者只能获取到失败前已成功上传的图片数据

技术分析

通过查看源码发现，问题的根源在于组件内部使用了 Promise.all 来处理批量上传任务。Promise.all 的特性是：当其中任何一个 Promise 被 reject 时，整个 Promise.all 就会立即 reject，而不会等待其他未完成的 Promise。

在 ImageUploader 组件的实现中，当某个图片上传失败时，整个上传流程就会中断，导致 onChange 事件提前触发，无法获取完整的最终上传结果。

解决方案建议

针对这个问题，可以考虑以下几种解决方案：

1. 使用 Promise.allSettled 替代 Promise.all： Promise.allSettled 会等待所有 Promise 完成（无论成功或失败），然后返回每个 Promise 的结果状态。这样开发者可以获取所有图片的上传结果，包括成功和失败的。

2. 自定义上传队列处理： 可以实现一个上传队列管理器，控制上传任务的并发和错误处理，确保即使有部分失败也能完成所有上传任务。

3. 增加错误重试机制： 对于上传失败的图片，可以自动或手动触发重试，提高上传成功率。

最佳实践

在实际开发中，处理多文件上传时建议：

1. 显示每个文件的上传状态（上传中、成功、失败）
2. 提供失败文件的重试功能
3. 在最终提交时检查所有文件的上传状态
4. 对于关键文件，可以考虑实现断点续传功能

总结

多文件上传是移动端常见的功能需求，但其中的错误处理和状态管理往往容易被忽视。通过理解 Promise 的不同处理方式和上传组件的内部实现原理，开发者可以更好地处理各种边界情况，提供更稳定的用户体验。

对于 ant-design-mobile 的 ImageUploader 组件，建议在后续版本中优化多文件上传的错误处理逻辑，或者提供更灵活的上传策略配置选项。