layui upload 组件需手动控制最大上传文件数：在 choose 回调中用 pendingFiles 数组记录待上传文件，超限时 return false，并同步处理 dragend、del、done 等事件更新状态。
layui upload 组件怎么限制最大上传文件数
layui 的 upload 组件本身没有直接叫 maxnumber 或 limit 的配置项，必须靠手动拦截 + 状态控制来实现“最多上传 n 个文件”。核心思路是：在 choose 回调里检查当前已选文件数，超限就 return false 阻止后续流程。
为什么不能只靠 multiple 和 acceptNum
multiple 只控制是否允许多选，acceptNum 是 layui 2.8+ 新增的「单次选择最多文件数」（注意：不是「整个组件生命周期内最多」），但它只对点击触发的原生 <input type="file"> 有效，且不阻止用户反复点击选择。也就是说：
-
acceptNum: 3→ 用户一次最多勾选 3 个文件，但点两次就能凑够 6 个 - 它不感知已上传/已排队/已删除的文件状态，纯前端选择阶段限制
- 老版本 layui（如 2.7）压根不支持
acceptNum，必须手写逻辑
推荐做法：用 choose 回调 + 全局计数器控制
定义一个变量记录当前已选且未上传/未取消的文件数（比如 uploadedCount 或 pendingFiles 数组），在 choose 中判断并截断：
let pendingFiles = [];
upload.render({
elem: '#uploadDemo',
url: '/upload',
multiple: true,
choose: function(obj) {
const files = obj.pushFile(); // 获取本次选中的所有 File 对象
const max = 5;
if (Object.keys(files).length + pendingFiles.length > max) {
layer.msg(`最多只能选 ${max} 个文件`, {icon: 2});
return false; // 阻止上传队列建立
}
// 合并到待上传列表
Object.values(files).forEach(file => {
pendingFiles.push(file);
});
},
// 上传成功后记得从 pendingFiles 中移除对应项
done: function(res, index, upload) {
const file = pendingFiles[index];
if (file) {
pendingFiles.splice(index, 1);
}
},
// 如果用户点击删除预览项，也要同步清理 pendingFiles
del: function(obj) {
const index = pendingFiles.findIndex(f => f.uid === obj.file.uid);
if (index > -1) pendingFiles.splice(index, 1);
}
});
注意：obj.pushFile() 返回的是一个以 uid 为 key 的对象，需要用 Object.values() 或遍历 key 来取真实 File 列表。
容易忽略的边界情况
仅靠 choose 拦截还不够，这些地方也得同步处理：
- 用户拖拽上传时，
choose不触发 → 必须监听dragend或改用before（layui 2.8+ 支持） - 重复选择同一文件，
pushFile()会生成新 uid，但实际文件可能相同 → 如需去重，得比对file.name + file.size + file.lastModified - 页面刷新后
pendingFiles丢失，但 DOM 预览还在 → 建议搭配auto: false，上传由按钮显式触发，避免自动上传干扰状态 - 如果用了
bindAction自定义上传按钮，choose仍会执行，但done的index可能错位 → 推荐统一用uploading和done中维护数组索引
真正稳住数量上限，关键不在参数，而在你对 pendingFiles 这个状态的全程掌控——选、删、传、失败重试，每个环节都得更新它。
