多图并发上传需用队列+限流控制并发数(如3个),避免超限;单图支持取消、进度反馈与重试;错误分类记录,结果按文件标识聚合;ui展示状态、进度及失败重试。

多图并发上传的关键是控制同时发起的请求数量,避免浏览器连接数限制或服务端压力过大。核心思路是用“队列 + 限流”代替全量并发,确保稳定性和可预测性。
用 Promise 队列控制并发数量
不直接 Promise.all(files.map(upload)),而是维护一个运行中的请求数(如最多 3 个),新任务等有空位再触发:
- 定义最大并发数(如
maxConcurrent = 3) - 用数组暂存待上传文件,用计数器跟踪当前进行中请求数
- 每次成功/失败后,从队列取下一个文件继续上传
- 可用
async/await+ 递归函数实现简洁逻辑,避免手动管理状态
封装可取消、带进度的单图上传函数
每个上传应支持中断和实时进度反馈,便于用户感知和异常处理:
- 使用
XMLHttpRequest或fetch+AbortController实现取消能力 - 监听
upload.onprogress计算并上报当前图片的上传百分比 - 返回包含
promise、cancel方法的对象,方便上层统一管理 - 对单次请求做重试(如失败后间隔 1s 重试 2 次),但需避免队列整体阻塞
统一错误处理与结果聚合
并发控制下,部分失败不应导致整个流程终止,需区分错误类型并保留成功结果:
- 将每张图的上传结果(成功/失败/重试次数/错误信息)存入独立对象,最后统一返回
- 网络错误、4xx/5xx 响应、超时等分类记录,便于前端提示或自动降级(如跳过无效图片)
- 上传完成后,根据服务端返回的文件 URL 或 ID 组装最终数据,供后续表单提交使用
结合 UI 反馈提升体验
用户需要明确知道哪些图在传、卡在哪、是否完成:
- 为每张图维护本地状态:
pending/uploading/success/error - 显示全局并发数(如“当前上传中:2/3”)和各图独立进度条
- 允许点击已失败项重新上传,不需刷新整个列表
- 上传结束时,用 toast 提示成功数与失败数,并提供失败详情查看入口
不复杂但容易忽略的是:上传顺序不一定等于原始文件顺序,结果聚合时要靠文件标识(如 file.name + file.size 或临时 id)对齐,而不是依赖数组索引。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











