layui upload 默认单文件,关键在禁用 multiple:删配置中 multiple: true、移除 input 标签的 multiple 属性、避免 choose 回调缓存文件;number: 1 无效且误导,验证用 obj.files.length 和 object.keys(obj.pushfile()).length。
默认就是单文件,别加 multiple: true
layui upload 组件默认行为就是只允许选一个文件——只要你没主动开启多选。浏览器原生的 <input type="file"> 在没加 multiple 属性时,系统文件选择器天然只让你勾一个。所以问题往往出在配置或 dom 上:
- 检查初始化代码里是否写了
multiple: true,删掉它 - 检查 HTML 中绑定的
<input>标签是否自带multiple属性,Layui 会读取并生效 - 如果用的是自定义触发按钮(比如
<button id="uploadBtn"></button>),那 DOM 里根本不该出现<input>,自然不会有多选干扰
别在 choose 回调里缓存文件数组
有人想“先选再统一上传”,于是在 choose 里把 obj.files 存进全局数组,结果每次选都追加——这不是多选,是逻辑误用。Layui 每次触发 choose 都是全新 FileList,但你的变量没清空:
- 正确做法:不干预,让 Layui 自己走单次流程;或在
choose里立刻调用obj.upload() - 非要手动控制:每次进入
choose先清空引用,再取obj.files[0],例如selectedFile = obj.files[0] - 注意 IE9- 兼容性假象:老浏览器不支持
filesAPI,obj.files是undefined,此时 Layui 会退化为 form submit,表现可能异常
number: 1 不是必须项,且容易误导
number 参数是配合 multiple: true 使用的,表示“多选模式下最多允许几个”。如果你根本没开 multiple,设 number: 1 没实际作用,还可能让人误以为这是限制开关:
- 不要为了“保险”而加
number: 1 - 真正起效的是
multiple的有无,不是number - 若业务后期要支持多选,再打开
multiple并配number即可,别提前混用
验证是否真被多选干扰的最快方式
直接打印 obj.files.length 和 Object.keys(obj.pushFile()).length:
- 如果都是
1,说明没多选,问题在后续逻辑(比如重复调用upload.render) - 如果大于
1,说明multiple被启用了,回溯配置和 DOM - 注意:Layui 的
obj.pushFile()返回的是对象键值对,要用Object.keys().length才准,obj.files.length在某些版本下可能不准
实际限制单文件的关键点不在参数堆砌,而在保持默认行为干净——删掉所有 multiple 相关痕迹,别让 choose 回调变成状态管理器。











