必须同时禁用multiple属性并校验files.length===1：去掉multiple防止多选，accept="image/*"过滤类型，change事件中检查files.length，非1则清空并提示；后端仍需二次校验文件数量、MIME类型及大小。
只用 accept 和 multiple 不够，必须组合控制
单纯写 accept="image/*" 只能过滤文件类型，不能限制张数；加了 multiple 反而允许选多张。真正限制“只能一张”，得靠两个动作：一是禁用多选，二是校验文件数量是否为 1。
input type="file" 必须去掉 multiple 属性
这是最基础但常被忽略的一环。只要写了 multiple，哪怕 JS 后续清空，用户在弹窗里仍可 Ctrl+Click 或 Shift+Click 选多个 —— 浏览器原生行为不受 JS 阻止。
- ✅ 正确写法：
<input type="file" accept="image/*"> - ❌ 错误写法：
<input type="file" accept="image/*" multiple>（哪怕你 JS 里删掉多余文件，也已违反“只能一张”的前提） - ⚠️ 注意：
single不是合法 HTML 属性，不要写single—— 它无效，且部分浏览器会直接忽略整个input标签
change 事件里必须检查 files.length !== 1
即使没写 multiple，用户仍可能通过拖拽一次扔进多个文件（Chrome、Edge 支持），或在某些系统弹窗中手动切换到“所有文件”后误选多个。所以 JS 校验不是可选项，是必选项。
- 监听
change事件，取e.target.files - 如果
files.length === 0：说明用户点了取消，可忽略或提示“请至少选择一张图片” - 如果
files.length > 1：立即清空输入框（e.target.value = ''），并给出明确提示，比如“只能上传一张图片” - 别只靠
files[0]就往下走 —— 这会让用户误以为多选成功了，实际只用了第一张，体验差且不透明
后端仍需校验，前端限制只是第一道防线
所有前端限制都可被绕过：禁用 JS、改 DOM、直接发 POST 请求。所以服务端收到文件时，必须再次检查：
立即学习“前端免费学习笔记（深入）”；
- 是否只有一个文件字段（如
req.files.image而非req.files.images数组） - 该文件的 MIME 类型是否属于
image/开头（不能只看扩展名） - 文件大小是否在合理范围（比如 ≤ 5MB），避免单张超大图撑爆内存
最容易被忽略的是：很多人以为“没写 multiple 就安全了”，结果拖拽多图进页面后，files.length 真的会大于 1 —— 这个行为在现代浏览器中完全合法，且不触发任何警告。
