layui文件上传的size参数单位为kb,accept/exts/acceptmime需协同生效,choose回调中用image预览校验图片尺寸,before回调用于业务规则拦截,服务端校验不可省略。

size参数单位是KB,不是MB或字节
写 size: 2048 表示 2MB,不是 2KB;size: 5 实际只允许 5KB 文件——一张未压缩的截图都可能超限。Layui 不会把 byte 或 MB 当作合法单位,硬写 size: 1048576(1MB 的字节数)也无效,它内部直接按 KB 解析。
常见错误:后端限制设了 10MB,前端却写 size: 10,结果用户点选就失败,且无提示。正确写法是 size: 10240。
注意:size 仅校验单个文件,多文件上传时总大小不在此限制范围内。
accept、exts、acceptMime 必须三者配合才真正生效
accept: "images" 只影响系统文件选择框的默认筛选视图(比如 macOS 下只显示 .jpg/.png 图标),不阻止用户手动切换到“所有文件”并选中 .exe;exts: "jpg|png|gif" 是前端字符串匹配,但大小写敏感、不含点、必须用竖线分隔;acceptMime: "image/jpeg,image/png,image/gif" 才真正控制 <input type="file"> 原生的 accept 属性,部分旧版 Safari 对 MIME 支持弱,所以不能只靠它。
推荐组合:
-
accept: "images"(提升体验) -
exts: "jpg|png|gif|jpeg"(基础后缀校验) -
acceptMime: "image/jpeg,image/png,image/gif,image/jpg"(增强兼容)
单独漏掉任一环,都可能出现“明明写了 jpg 却能选中 .bmp”或“选完立刻报错但没拦在选择阶段”的情况。
choose 回调里做二次校验才能处理真实图片尺寸和比例
Layui 没有内置长宽比或像素级限制,必须进 choose 回调,用 obj.preview() 拿到 blob URL 后创建 new Image() 加载,再读取 img.width 和 img.height。
关键点:
-
obj.preview是异步的,不能在外层return false,得在img.onload里调obj.clear() - 加
img.onerror容错,否则损坏图或跨域图会导致静默跳过校验 - 避免用
===判断比例,改用Math.abs(w/h - 4/3) > 0.01 - 一次选多个图时,
obj.preview会为每个index单独触发,需逐个处理
before 回调适合拦截大小+格式+业务规则,但别依赖它做图片解析
before 是上传前最后一道同步/异步闸门,适合汇总判断:比如“已上传 9 张,本次再传就超 10 张上限”,或“文件名含非法字符”,或“单个文件 > 20MB”。但它拿不到图片像素信息,因为此时还没触发预览。
典型写法:
before: function(obj){
var files = obj.getChooseFiles();
if(files.length === 0) return;
<p>for(var i = 0; i 20 <em> 1024 </em> 1024){
layer.msg('单张图片不能超过 20MB', {icon: 2});
return false;
}
}
}
</p>
注意:before 返回 false 或 Promise.reject() 才会阻断;若只弹提示不返回,上传照常进行。
服务端校验不能省——前端所有限制都可被绕过,size 和 exts 只是用户体验层的筛子,不是安全边界。











