Vue 3 文件上传类型限制需前端拦截与后端兜底结合：用 accept 属性过滤选择框文件类型，before-upload 钩子校验后缀、MIME 类型及大小，必要时增加文件头校验。
在 Vue 3 中限制文件上传类型，核心是**前端拦截 + 后端兜底**。仅靠界面筛选不安全，但用户交互体验必须靠前端即时反馈。实际开发中推荐组合使用 accept 属性、before-upload 钩子和（可选）文件头校验（Magic Number），兼顾体验与安全性。
用 accept 属性过滤选择框中的文件类型
这是最轻量、最直观的交互限制。它作用于系统文件选择弹窗，能直接隐藏不支持的文件（部分系统/浏览器下效果更明显）：
- 写法示例：
accept=".pdf,.doc,.docx,.xls,.xlsx,.txt" - 注意：逗号后不要空格；扩展名必须带英文点号（
.pdf✅，pdf❌） - 局限：仅影响文件选择界面，无法阻止用户拖拽或通过其他方式绕过，不能替代逻辑校验
在 before-upload 中做类型与大小双重校验
这是真正起效的业务层拦截点，返回 false 或 Promise.reject() 可中止上传流程，并给出明确提示：
- 校验后缀（简单常用）：
file.name.toLowerCase().endsWith('.pdf') - 校验 MIME 类型（更可靠）：
file.type === 'application/pdf'，但注意浏览器可能不准确（如 .csv 常报text/plain） - 同时校验大小：
file.size （10MB） - 示例逻辑：
if (!['.pdf','.doc','.docx'].includes(file.name.slice(file.name.lastIndexOf('.')).toLowerCase())) {
this.$message.error('仅支持 PDF、Word 文档');
return false;
}
进阶：用文件头（Magic Number）识别真实类型（防伪造）
当安全要求高（例如上传合同、证书等敏感文档），仅靠后缀或 type 容易被篡改。可读取文件前几个字节比对魔数：
立即学习“前端免费学习笔记（深入）”；
- Pdf 开头通常是
%PDF→ 字节数组[0x25, 0x50, 0x44, 0x46] - Docx 是 ZIP 格式 → 开头为
PK\x03\x04→[0x50, 0x4B, 0x03, 0x04] - 实现方式：用
file.arrayBuffer()读取前 4–8 字节，转成 Uint8Array 比对 - 注意：该操作是异步的，
before-upload需返回 Promise
别忘了后端二次校验
所有前端限制都可被跳过。后端必须独立验证：
— 文件扩展名是否在白名单内
— 文件头是否匹配声称类型
— 是否存在恶意内容（如宏、脚本）
— 最终保存时重命名，避免原始文件名被执行或解析
