accept属性仅优化文件选择器界面，无法真正校验文件类型；必须结合javascript校验扩展名与后端magic bytes校验，否则前端限制形同虚设。
用 accept 属性限制文件选择对话框显示的后缀名
浏览器原生支持 accept，它不校验文件真实内容，但能直接过滤系统文件选择器里默认展示的文件类型，减少用户误选。比如只允许上传 PNG 和 JPG：<input type="file" accept=".png,.jpg,.jpeg">。注意写法：点号不能省，.jpg 和 .jpeg 要分开写；image/* 是通配 MIME 类型，不是后缀名，和本问题无关。
用 JavaScript 提取并比对文件扩展名（防 MIME 伪造）
MIME 类型（file.type）容易被伪造，而扩展名是从文件名里解析出来的，更可靠一点——尤其当后端也按扩展名路由或分发时。关键步骤是：
- 监听
change事件，拿到event.target.files[0] - 用
file.name.split('.').pop().toLowerCase()取扩展名 - 和白名单数组比对：
['png', 'jpg', 'jpeg', 'gif'] - 匹配失败就清空输入：
event.target.value = ''，再提示
示例片段：
const allowedExts = ['png', 'jpg', 'jpeg', 'gif'];
const file = event.target.files[0];
const ext = file.name.split('.').pop().toLowerCase();
if (!allowedExts.includes(ext)) {
alert('仅支持 PNG/JPG/GIF 格式');
event.target.value = '';
}
为什么不能只靠 accept 或只靠扩展名？
accept 完全由浏览器控制，用户点“所有文件”就能绕过；扩展名虽比 MIME 更实在，但也能被手动改名（比如把 evil.exe 改成 safe.jpg）。所以这两者都只是前端体验层手段，必须配合后端用魔术字节（magic bytes）校验文件头，否则等于没设防。常见坑是：开发时本地测试总用正确后缀的图，上线后被传一个伪装成 JPG 的 WebShell，直接崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
