最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Layui上传组件如何实现多文件同时上传的并行限制
时间:2026-07-13 12:17:46 编辑:袖梨 来源:一聚教程网
layui upload 的 number 参数仅限制单次文件选择操作最多选中几个文件,而非整个队列总数;它对原生 input[type=file] 有效,不感知已删/已传/已取消文件,且 layui 2.8+ 才支持,需配合 multiple: true 使用。
layui upload 的 number 参数到底限制什么
number 不是“整个上传队列最多几个文件”,而是“单次 choose 操作最多允许选中几个文件”。它只对点击按钮触发的原生 <input type="file"> 有效,且不感知已删除、已上传或已取消的文件状态。
常见误解:设了 number: 3 就以为用户总共只能传 3 个——错。用户点两次“选择文件”,每次选 3 个,照样能凑出 6 个待上传文件。
- 老版本(如 layui 2.7)压根不支持
number,必须手写逻辑 - layui 2.8+ 支持
number,但仅作用于单次选择动作,不是全局计数器 - 它和
multiple: true配合才有意义;单独设number无效
如何真正限制“同时上传”的并发数
layui 默认行为是:每个文件单独发一个请求(auto: true 时),所谓“同时上传”其实是浏览器并发 HTTP 请求,不受 layui 控制。要限制并发数,得靠手动节流 + 队列调度。
关键不是拦住用户选文件,而是控制 obj.upload() 的调用节奏:
- 把所有待上传文件缓存在数组里(比如
pendingFiles = []) - 定义最大并发数
maxConcurrent = 3 - 用一个计数器
running = 0跟踪当前正在上传的请求数 - 每次调用
obj.upload(index, file)前判断if (running ,否则入队等待 - 在
done或error回调里running--并尝试启动下一个
注意:obj.upload() 是 layui 内部方法,不能直接传数组;必须逐个调用,靠你自己串起队列。
为什么不能依赖 acceptNum 或 multiple 实现并行控制
acceptNum(layui 2.8+ 新增)和 multiple 都不涉及网络层调度:
-
multiple: true只影响是否允许多选,不影响请求并发 -
acceptNum: 3和number类似,仅限制单次<input>选择数量,且对拖拽上传无效 - 拖拽进来的文件会绕过
acceptNum和number,直接进choose回调 - 浏览器本身对同域名并发请求数有限制(通常 6 个),但这不是你能配置的“并行上限”
更稳妥的做法:关闭 auto,自己用 fetch 控制并发
如果你真需要精确控制并发数(比如限 3 个请求同时跑),别走 layui 的 upload 流程,改用原生 fetch + Promise.allSettled 分批处理:
- 设
auto: false,在choose中收集全部File对象到allFiles - 写个
uploadBatch(files)函数,每次取maxConcurrent个,构造 FormData 发送 - 用
Promise.allSettled()等这批完成,再取下一批 - 后端接口需支持接收
files[]字段的 multipart 请求
这样你才能真正掌控并发粒度,也避开 layui 内部上传逻辑的不可控行为。复杂点在于要自己处理进度、重试、错误聚合——但这是换来的确定性。
相关文章
- 怎样用Kimi整理PPT简单排版技巧 07-14
- 如何借助 Kimi 整理 Excel 基础函数使用清单 07-14
- 怎样用 DeepSeek 制作社区公告 07-14
- 如何用 DeepSeek 实现文章润色 07-14
- 如何用 Kimi 创作出活动策划文案 07-14
- 怎样用豆包生成危机公关文案 07-14