multiple属性仅支持多选但不控制数量上限，需用js在change事件中截取前5个文件、去重校验并更新ui，同时服务端和中间层须同步限制以防绕过。
用 multiple 属性开启多选，但别指望它限制总数
multiple 只是让 <input type="file"> 支持一次选多个文件，它本身**不提供数量上限控制**。浏览器会照单全收——哪怕你点了 50 个，files.length 就是 50。想卡在“最多 5 个”，必须靠 JS 干预。
监听 change 事件并截断或清空
用户点选完立刻检查，这是最直接的拦截点：
- 获取
e.target.files，它是个只读的FileList，不能直接删元素 - 用
Array.from(files).slice(0, 5)提取前 5 个，再存进你自己的数组（比如selectedFiles = []） - 如果超了，清空
input.value = ''，否则同名文件第二次选中不会触发change - 别只弹
alert，同步更新 UI 显示“已选 6/5”，并禁用上传按钮
处理重复选择和跨次累计
用户可能两次打开对话框，又选了之前挑过的文件。光看 files.length 不够：
- 对每个新文件生成轻量唯一标识：
${file.name}-${file.size}-${file.lastModified} - 用
Set存已接受的标识，新文件先查重再加入selectedFiles - 每次新增都做去重 + 截断，确保最终数组长度 ≤ 上限
- 删除某项时，从数组和 Set 中同时移除对应项
提交前用 FormData 再校验一次
前端逻辑可被绕过（比如直接调 fetch），服务端也必须拦。但前端这最后一关很关键：
- 构造
FormData时，遍历你维护的selectedFiles数组，不是input.files - 如果
selectedFiles.length > 5，直接return并提示，不发请求 - 后端收到请求后，仍要检查
Content-Length和实际文件数，两者都要符合阈值 - Nginx 或 Cloudflare 等中间层若设了
client_max_body_size，得比你的总文件大小上限更宽松，否则连请求都进不来
真正容易被忽略的是：用户在弱网下上传一个 499MB 文件，前端没拦住，等三分钟才报错 —— 这时候带宽、连接、日志全白耗。数量限制不是为了“显得严谨”，而是把失败卡在用户点击之后、传输开始之前。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
