默认单选，无需额外配置；关键在移除 multiple 属性，并在 js 中校验 files.length === 1，同时服务端必须严格校验单文件。
HTML <input type="file"> 默认就是单选
很多人误以为需要额外配置才能实现“单选上传”，其实 <input type="file"> 在未设置 multiple 属性时，天然只允许选中一个文件。浏览器 UI（如文件选择对话框）会默认限制为单选，且 event.target.files 永远最多只含一项。
常见错误现象：页面看起来能多选、或 JS 里取到多个文件 —— 基本都是因为误加了 multiple 属性，或用了第三方库覆盖了原生行为。
- ✅ 正确写法：
<input type="file" id="upload"> - ❌ 错误写法：
<input type="file" multiple id="upload">（这会导致多选） - ⚠️ 注意：
accept不影响单/多选逻辑，只过滤可选文件类型
用 JavaScript 获取并校验单个文件
即使 HTML 写对了，JS 层仍需主动检查 files.length，不能假设一定有文件或只有一个 —— 用户可能取消选择、或手动清空输入框（input.value = '' 后 files 为空）。
关键判断点在事件回调里：
document.getElementById('upload').addEventListener('change', function(e) {
const files = e.target.files;
if (files.length === 0) return; // 用户取消或清空
const file = files[0]; // 安全取第一个（也是唯一一个）
console.log(file.name, file.size, file.type);
});
- 不要直接解构：
const [file] = e.target.files可能因files为空导致file为undefined -
files是FileList对象，不是数组，不支持map/forEach，需用files[0]或转成数组再操作 - 如果业务要求“必须选一个”，需在提交前校验
files.length === 1，不能只靠 UI 限制
禁用多选的隐藏风险：表单重置与重复触发
用户点击输入框后取消选择，或通过 JS 手动设 input.value = ''，看似清空了，但部分浏览器（尤其是 Safari）可能残留上一次的 files 引用，导致后续 change 事件不触发。
- 安全清空方式：
input.type = 'text'; input.type = 'file'（强制重建 input） - 更稳妥做法：监听
change后保存文件引用，不再依赖input.files的实时值 - 避免给同一
input绑定多个change监听器，否则可能重复执行上传逻辑
服务端也要做单文件校验
前端限制只是体验层，恶意用户可绕过 HTML/JS 直接发请求。后端收到上传时，必须检查是否仅含一个文件字段（如 req.files 长度）、文件名是否合法、大小是否超限。
例如 Express + Multer 场景：
upload.single('avatar') // 明确指定只接收单个字段名为 'avatar' 的文件
- 用
single()而非array()或fields()，Multer 会自动拒绝多文件请求 - 即使前端传了多个同名文件，
single()也只取第一个，其余丢弃 —— 但最好配合日志告警异常上传行为 - 别忘了检查
req.file是否存在，它可能是undefined（用户没选）
multiple 就够了，但真正容易出问题的地方，都在“用户取消”“手动清空”“服务端信任前端”这几个环节。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
