acceptmime 必须与 accept="file" 配对才生效,仅设 acceptmime 无效;多 mime 用“, ”分隔;exts 为小写竖线分隔后缀,仅校验文件名;choose 回调中需手动校验并 return false 阻断非法文件;size 单位为 kb;服务端必须二次校验文件头和真实 mime。

acceptMime 必须配对 accept 才能过滤文件选择框
只写 acceptMime: "application/pdf" 没用,浏览器不会过滤。Layui 要求 accept 先设为 "file"(不能是 "images" 或空),再由 acceptMime 精确指定 MIME 类型。Windows/macOS 文件选择器才可能只显示 PDF 和 Word 文件。
常见错误:写成 acceptMime: "pdf" 或 "file/pdf" → 完全无效;必须用标准值:"application/pdf"、"application/vnd.openxmlformats-officedocument.wordprocessingml.document"(.docx)或 "application/msword"(.doc)。
-
accept: "file"是前提,否则acceptMime被忽略 - 多个 MIME 用英文逗号+空格分隔:
"application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.document" - Safari 对
.docxMIME 支持不稳定,建议同时加application/msword兜底
exts 是上传前最后一道字符串校验,大小写敏感且不含点
exts 不影响弹窗,只在用户点完“打开”后检查文件名后缀。它不读内容、不防伪装,但能快速拦截明显错误(比如选了 .exe 却声称是 PDF)。
正确写法:exts: "pdf|docx|doc" —— 竖线分隔、小写、无点。写成 "PDF,DOCX" 或 "pdf, docx" 都会失效。
- 用户把
hack.exe改名为report.pdf,exts会放行;后端必须用文件头(magic number)二次校验 - 若需拒绝非真实 PDF 的
.pdf文件,得进before回调读file.type或用FileReader读前 4 字节 -
exts和acceptMime应保持语义一致,避免配置矛盾(比如acceptMime允许 PDF,exts却没写pdf)
choose 回调里 return false 才能真正阻止非法文件进入流程
即使 acceptMime 和 exts 都配了,Layui 默认仍会把不符合的文件放进 obj.files(尤其拖拽场景)。必须在 choose 中手动判断并中断。
示例逻辑:
choose: function(obj) {
const files = obj.getChooseFiles();
const validExts = ['pdf', 'docx', 'doc'];
for (let file of files) {
const ext = file.name.split('.').pop().toLowerCase();
if (!validExts.includes(ext)) {
layer.msg('仅支持 PDF、Word(.doc/.docx)文件', {icon: 2});
return false;
}
}
obj.upload(); // 确认合法后才触发上传
}
- 别依赖
obj.files.length判断——IE9- 下它是undefined,应统一用obj.getChooseFiles() - 拖拽上传时,
acceptMime完全不生效,exts和choose校验是唯一防线 - 如果用了
multiple: true,要遍历每个file单独校验,一个不符就整批拒掉
size 单位是 KB,不是 MB,设错会导致限制过严
PDF 和 Word 文件体积波动大,合同类 PDF 常超 10MB。size 参数单位固定为 KB,写成 size: 10 表示最多 10KB,一张扫描图都传不过去。
- 推荐值:
size: 51200(50MB)保 PDF 扫描件,size: 10240(10MB)适合纯文字 Word - 超过
size时,choose回调里obj.getChooseFiles()返回空数组,且直接进error回调,不触发before -
size只限单个文件,多文件上传时不会累加校验总大小
前端限制只是体验层筛子,acceptMime 受浏览器实现掣肘,exts 和 size 可被绕过,真正的校验必须落在服务端——读文件头、比 magic number、验证真实 MIME、检查内容是否可解析。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











