单文件上传应省略multiple属性，仅用；accept仅过滤类型不控数量；js校验是兜底，后端必须用single等单文件接收逻辑。
不加 multiple 就是单文件上传
HTML 的 <input type="file"> 默认就是单选——只要你不显式加 multiple 属性，用户就只能选一个文件。这是最轻量、最可靠的限制方式，不需要 JS 干预，也不依赖 accept 或其他属性。
常见错误是误加了 multiple="false" 或 multiple=""，这反而会触发多选模式（HTML 中布尔属性存在即为 true）。所以正确写法就是：不写 multiple。
-
<input type="file" name="avatar">✅ 单文件 -
<input type="file" name="avatar" multiple>❌ 多文件 -
<input type="file" name="avatar" multiple>❌ 仍是多文件（因为multiple属性已存在）
accept 只影响文件选择框的默认过滤，不控制数量
accept 的作用是让浏览器在打开文件选择对话框时，优先只显示匹配类型的文件（比如 accept="image/*" 会让 Windows 资源管理器或 macOS Finder 默认筛选出图片）。但它完全不影响可选数量。
它也不能防止用户手动切换到“所有文件”视图并选多个——前提是你的 input 已经加了 multiple。所以如果你本意是单文件，accept 只是锦上添花，不是必要条件。
- 移动端 Safari 对
accept的 MIME 类型支持较弱，建议同时写扩展名，如accept=".pdf,application/pdf" -
accept="image/jpeg,image/png"在部分 Android 浏览器中可能失效，而accept="image/*"更稳妥 - 不要写
accept="pdf"（缺点），必须带点或application/前缀
JS 拦截多选并强制清空，属于补救而非设计
如果因历史原因或 UI 组件封装导致 input 不可控（比如某些 UI 库自动加了 multiple），才需要 JS 补救。监听 change 事件，检查 files.length > 1，然后重置 input.value = "" 并提示用户。
注意：这种操作会打断用户流程，且在拖拽上传场景下无效（drop 事件需单独监听）。它只是兜底手段，不该作为主逻辑。
- 别用
e.target.files[0]后就不管了——要主动校验files.length - 清空后记得 focus 回 input，否则用户可能不知道发生了什么
- 若用了第三方上传组件（如 Element Plus 的
el-upload），优先查其limit和multiple配置项，而不是硬套原生逻辑
后端必须按单文件逻辑接收，否则前功尽弃
前端限制再严，后端如果按数组接收（比如 Express + Multer 中配置 array('files')），就等于开了后门。单文件上传的后端处理必须明确只取第一个，或直接拒绝多文件请求。
典型错误是：前端没加 multiple，但后端仍用 req.files（数组）去取，结果发现 req.files.length === 0，却没意识到前端字段名和后端解析方式不匹配。
- Node.js + Multer：用
single('avatar')，不是array('avatar') - PHP：
$_FILES['avatar']['tmp_name']是字符串，不是数组；若收到数组说明前端发了多个同名字段 - Flask：
request.files.get('avatar')返回单个FileStorage，不是getlist
真正决定单/多文件的，是 HTML 层的 multiple 属性是否存在，以及后端是否按单文件协议解析。中间任何一层松动，都会让限制失效。尤其容易被忽略的是后端接收逻辑和字段名的一致性——前端写 name="cover"，后端却按 file 去取，结果永远拿不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
