讲师中心 微信公众号
AI工具推荐 视频效率加速

Layui上传组件如何解决后端返回413错误(文件过大)

浅墨君_5406

浅墨君_5406

发布时间:2026-07-05 07:16:27

|

158人浏览过

|

来源于php中文网

原创

Layui的size参数仅前端校验,单位KB,文件超限时不发请求;若≤size仍报413,说明Nginx或后端限制未同步调整,需配置client_max_body_size及post_max_size等参数。

layui 的 size 参数只拦前端,不防 413

它只是个纯 js 校验,单位是 kb;设 size: 2048 意味着文件 > 2mb 时,layui 根本不发请求,直接触发 choose 或 before 回调。但若文件 ≤ 2mb,却仍被后端或 nginx 返回 413,说明问题出在服务端限制——此时请求已发出,size 完全无效。

常见误操作:只改了 layui 的 size,以为万事大吉,结果上传 1.9MB 文件仍报错。

  • 前端校验是第一道防线,不能替代服务端配置
  • size 值必须和后端实际允许上限对齐,否则用户会困惑“明明没超,为什么失败”
  • 建议把 size 设得略小于服务端限制(比如服务端允 50MB,前端设 48MB),留出 header、form 字段等额外开销余量

error 回调里怎么识别真 413?别只看 data.status === 413

浏览器 XMLHttpRequest 的 status 在跨域或代理拦截时经常为 0,尤其遇到 Nginx 或 Cloudflare 直接拦截 413,data.status 很可能不是 413,而是 0 —— 但响应体(data.responseText)里通常含 "Payload Too Large" 或 "Request Entity Too Large"。

正确判断逻辑应组合多个信号:

  • data.status === 413 → 明确服务器返回
  • data.status === 0 && data.readyState === 4 && /entity too large|payload too large/i.test(data.responseText) → 极大概率是 Nginx/CDN 拦截
  • 配合浏览器 Network 面板确认真实状态码,不要只信 console.log(data)

示例片段:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
error: function(data) {
  const is413 = data.status === 413 || 
                (data.status === 0 && data.readyState === 4 && 
                 /entity too large|payload too large/i.test(data.responseText || ''));
  if (is413) {
    layer.msg('文件过大,请上传小于 ' + (this.size || 2048) + 'KB 的文件');
    return;
  }
  layer.msg('上传失败,请检查网络或重试');
}

Nginx 的 client_max_body_size 必须写在具体 location 块里

很多团队只在 http 或 server 块里加了 client_max_body_size 100m,但依然 413——因为更内层的 location 块没覆盖,用了默认 1MB。Layui 上传请求走的是你配的 url,比如 /api/upload,那这个路径对应的 location 才是生效位置。

  • ✅ 正确写法:location /api/upload { client_max_body_size 200m; }
  • ⚠️ 错误写法:只在 http 块设,但 location / 块里没声明,或写了 client_max_body_size 1m 覆盖了它
  • 修改后务必执行 nginx -t 验证语法,再 nginx -s reload 生效
  • 如果用了 proxy_pass,后端框架(如 Laravel 的 post_max_size、Express 的 limit)也得同步调大,且 ≥ Nginx 设置值

上传大文件时后端收不到其他字段?不是 413,是 multipart 解析失败

这是高频隐藏坑:文件本身没超限,但整个请求体(文件 + 其他 form 字段)超了 PHP 的 post_max_size 或 Node.js 的 body-parser 限制。Laravel 里常表现为能收到文件,但 request()->get('code') 为空;Nginx 日志无记录,后端日志也收不到该请求——本质是 Web 服务器在解析 multipart 前就因总 payload 超限丢弃了请求。

  • 查 post_max_size(PHP)、maxBodyLength(Axios)、limit(Express)等参数,它们控制的是整个请求体,不只是文件
  • 确保 post_max_size ≥ upload_max_filesize + 所有其他字段预估体积(比如 base64 图片、长文本)
  • Layui 的 data 选项传的字段也会计入总大小,别忽略

真正难调试的点在于:它不报 413,也不进后端代码,连日志都静悄悄——得靠 Network 面板看响应状态码、响应头是否为空,再结合 Nginx error log 确认是否被 early drop。

热门AI工具

更多
Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2303

2023.08.11

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6070

2024.03.19

后端的主要工作内容介绍
后端的主要工作内容介绍

后端是应用程序的服务端部分,负责核心任务,如数据库交互、业务逻辑处理和响应客户端请求。想了解更多后端的相关内容,可以阅读本专题下面的文章。

5406

2024.03.19

python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2303

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

4983

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6070

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5578

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

783

2024.05.22

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

100

2026.09.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.7万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn