一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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 ,否则入队等待
  • doneerror 回调里 running-- 并尝试启动下一个

注意:obj.upload() 是 layui 内部方法,不能直接传数组;必须逐个调用,靠你自己串起队列。

为什么不能依赖 acceptNummultiple 实现并行控制

acceptNum(layui 2.8+ 新增)和 multiple 都不涉及网络层调度:

  • multiple: true 只影响是否允许多选,不影响请求并发
  • acceptNum: 3number 类似,仅限制单次 <input> 选择数量,且对拖拽上传无效
  • 拖拽进来的文件会绕过 acceptNumnumber,直接进 choose 回调
  • 浏览器本身对同域名并发请求数有限制(通常 6 个),但这不是你能配置的“并行上限”

更稳妥的做法:关闭 auto,自己用 fetch 控制并发

如果你真需要精确控制并发数(比如限 3 个请求同时跑),别走 layui 的 upload 流程,改用原生 fetch + Promise.allSettled 分批处理:

  • auto: false,在 choose 中收集全部 File 对象到 allFiles
  • 写个 uploadBatch(files) 函数,每次取 maxConcurrent 个,构造 FormData 发送
  • Promise.allSettled() 等这批完成,再取下一批
  • 后端接口需支持接收 files[] 字段的 multipart 请求

这样你才能真正掌控并发粒度,也避开 layui 内部上传逻辑的不可控行为。复杂点在于要自己处理进度、重试、错误聚合——但这是换来的确定性。

热门栏目