Layui上传组件强制单文件上传方法

在 Layui 的 upload 组件中，默认行为就是单文件上传——这一点官方文档已明确说明，无需额外配置“限制”。然而，许多开发者仍会遇到明明没有设置多选，却可以选中多个文件的情况。问题通常出在两个地方：要么是 JavaScript 配置中悄悄开启了 `multiple: true`，要么是 HTML 中的 `` 标签自身携带了 `multiple` 属性，而 Layui 会优先读取这一属性。  ## 常见的“隐形开关”有三类 - `upload.render()` 配置中显式写了 `multiple: true` - HTML 中绑定的 `file` 类型 `` 元素自带 `multiple` 属性（Layui 会优先读取该属性） - IE9 及以下环境因缺失 `files` API，导致 Layui 降级处理，行为异常——不过官方早已不再维护这些古老浏览器，可忽略不计 ## 排查思路：JS 配置与 HTML 源码需同时检查 **JS 和 HTML 两个地方必须同时检查，任何一个残留 `multiple` 都会触发多选。** 具体做法如下： ### 1. JS 层面 在初始化参数中，要么删除 `multiple: true`（默认即为 `false`），要么显式写入 `multiple: false` 以明确限制。 ### 2. HTML 层面 如果使用自定义触发元素（例如 ``），DOM 中本就不应出现 ``。但若使用了 `bindAction` 或直接写 ``，则必须移除 `multiple` 属性。 ## 容易被忽略的场景：`choose` 回调中自行缓存文件 部分开发者希望实现“先选文件，再统一上传”的效果，于是在 `choose` 回调中将 `obj.files` 推入数组，每次选择都追加，结果造成“能选多个文件”的假象。这并非 Layui 的多选机制，而是自身缓存逻辑未清空所致。 解决方案如下： - 不要在 `choose` 中写 `selectedFiles.push(...)` 这类累加代码 - 如需干预，直接使用 `obj.files[0]`，或设置变量 `selectedFile = obj.files[0]`，每次覆盖而非追加 - 若需用户二次确认，应在 `choose` 中立即调用 `obj.upload()`，而不是攒到点击按钮时再发送 ## 澄清一个误区：`auto: false` 与多选无关 `auto: false` 仅控制“选完文件后是否立即发起上传请求”，不影响选择阶段的行为。组合效果如下： - `auto: false` + `multiple: false` → 用户只能选一个文件，点击上传按钮才发送 - `auto: false` + `multiple: true` → 用户可同时选多个文件，需自行处理批量上传逻辑 - 切勿认为关闭 `auto` 即可自动变成单文件——真正控制多选的是 `multiple` 开关 ## 强制单文件的关键：去掉所有让多选生效的痕迹 最容易踩坑的是 HTML 层中静默的 `multiple` 属性——它比 JS 配置优先级更高，且难以通过肉眼直接发现。检查时，建议直接搜索整个项目中所有 `multiple` 关键词，一搜即知。