前端用 file.size 即时拦截需配套后端 client_max_body_size、upload_max_filesize 或 limits.filesize 等参数，缺一不可；change 事件中读取 size 是唯一可靠时机，单位字节须换算，且需清空 input.value 防重复触发。
前端用 file.size 做即时拦截，后端必须配 client_max_body_size、upload_max_filesize 或 limits.fileSize 等对应参数，缺一不可——只做一边，用户要么卡在 pending，要么直接 413。
change 事件里读 file.size 是唯一可靠时机
不能等到 submit 才检查，否则用户已选好 2GB 视频却没任何提示。也不能依赖 accept 属性，它只管类型，对大小完全无效。
-
file.size单位是字节，别漏换算：2MB =2 * 1024 * 1024 - 必须清空
e.target.value，否则同名超限文件第二次选中不会触发change - Safari iOS WebView 旧版本可能返回
file.size === 0，加兜底判断if (!file || !file.size) - 移动端 Safari 对大文件的
size读取是同步且稳定的，不用包try/catch
后端限制不匹配会导致 413 或静默失败
前端拦住 5MB，但 Nginx 默认 client_max_body_size 1M，请求根本到不了你的 Node.js/PHP 进程，浏览器只看到 pending 几秒后跳 413 页面。
- Nginx：配
client_max_body_size 10M，且该值 ≥ 后端框架允许上限 - PHP：调
upload_max_filesize和post_max_size，后者必须 ≥ 前者 - Node.js + multer：用
limits: { fileSize: 10 * 1024 * 1024 }，不是靠req.headers['content-length']判断 - ASP.NET：改
<httpruntime maxrequestlength="102400"></httpruntime>（单位 KB）
按文件类型或设备动态设限更实用
硬写死 5MB 对图片够用，对视频就太紧；低内存手机上传 100MB 视频容易卡死，没必要。
- 用
file.type区分：图片走5 * 1024 * 1024，视频放开到100 * 1024 * 1024 - 查
navigator.deviceMemory，≤2GB 设备自动降为 10MB 阈值 - 用
input的data-max-size="20971520"属性，让每个上传框独立配置 - 图像类文件可先用 Canvas 压缩预估体积，比直接传原图省带宽
最容易被忽略的是 Nginx 和后端框架的限制对齐——前端提示再友好，只要 client_max_body_size 比后端小，用户永远卡在“上传中”状态，连错误都看不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
