413错误需在fetch响应中通过response.status===413识别并展示友好提示，不可仅依赖前端校验，因限制可能来自nginx、cdn或中间件等多层。
413 错误无法在前端直接拦截，必须等服务端返回后才可触发提示 —— 所以“友好提示”的核心不是阻止上传，而是让失败状态可感知、可理解、可重试。
fetch 上传时如何捕获并展示 413 提示
浏览器不会在请求发出前告诉你“这个文件会触发 413”，它只会在收到服务端响应后抛出错误。所以你要在 fetch 的响应处理分支里判断状态码：
- 用
if (!response.ok && response.status === 413)明确识别 413，不要只靠catch捕获网络异常 - 响应体可能含提示文本（如
上传文件超过50MB 限制），建议用response.text()读取后提取关键信息，而非硬编码文案 - 避免仅弹
alert()，改用页面内 toast 或更新按钮旁的<small class="text-danger"></small>区域，保持上下文不跳失
按钮状态要和服务端响应严格同步
用户点击上传后，按钮应进入加载态（如加 btn-disabled + disabled 属性）；一旦收到 413，立刻恢复可点击，并切换为警告态：
- 调用
button.classList.remove("btn-loading", "btn-success")清除旧状态 - 再执行
button.classList.add("btn-warning")，同时设button.title = "文件太大，请压缩或分片上传" - 切勿在
input[type="file"].onchange就提前加警告类 —— 此时连文件都还没发出去，纯属误导
为什么不能只靠前端校验规避 413
前端用 file.size 做限制看似合理，但实际容易失效：
- 用户可能禁用 JS，绕过校验
- 服务端配置（如 Nginx 的
client_max_body_size）和前端判断值不一致，比如前端拦 50MB，Nginx 却只允许 20MB - FormData 中混入大体积字段（如 Base64 图片字符串），
file.size完全不反映真实请求体大小 - 某些代理（如 Cloudflare 免费版）会在 Nginx 之前拦截并返回 413，你根本收不到后端响应
真正麻烦的是：413 可能来自 Nginx、CDN、反向代理、框架中间件（如 Express 的 express.json({ limit: '10mb' })）、甚至 PHP 的 post_max_size —— 提示文案得留余地，别写死“服务器限制 50MB”，而要说“上传失败，请检查文件大小或联系管理员”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
