file.size是唯一可靠的前端文件大小校验依据，须在change事件中通过event.target.files[0].size获取字节值并即时校验，失败后清空input.value并给出用户可见提示，阈值应按类型、设备、网络动态设定。
file.size 是唯一可靠的前端校验依据，别信 accept 或表单属性能限制大小——它只管类型，不管字节。
必须在 change 事件里读 file.size，不能拖到 submit 时
用户选中一个 2GB 视频后，如果等到点“上传”按钮才检查，页面可能卡住几秒才报错，体验极差。change 事件才是拦截的黄金时机。
- 用
event.target.files[0]拿到文件对象，再取.size（单位是字节） - 若
!file || !file.size，要兜底处理——某些 iOS WebView 或旧 Safari 可能返回0，不是 bug，是兼容性现实 - 校验失败后必须清空
input.value = ''，否则同名文件重复选择不会再次触发change - 别只写
console.log，用户看不到；alert、toast 或表单旁红字提示才是有效反馈
按场景设不同阈值：类型、设备、网络三者叠加
硬编码 5 * 1024 * 1024（5MB）只适合最简单页面。真实项目里，得动态算：
- 图片类（
image/jpeg,image/png）可设 5MB，视频（video/mp4）放宽到 100MB - 用
navigator.deviceMemory判断设备内存： - 结合
navigator.connection.effectiveType，如果是'2g'或'slow-2g'，直接压到 2MB 甚至禁用大文件上传 - 每个
<input>可带data-max-size="20971520"属性，让运营或配置页灵活控制，不用改 JS
预压缩估算比“拦不住就传”更省带宽
对图片这类可压缩文件，光看原始 file.size 不够准——用户传一张 8MB 的 PNG，但实际压缩到 JPEG 后可能只要 800KB。提前估算能避免误拦。
- 用
Canvas绘制并toBlob，指定质量（如0.8），再读取 blob.size - 若预估后仍超限，提示“该图压缩后仍过大”，比“文件太大”更可信
- 注意：
toBlob是异步的，需用Promise包一层，别阻塞 UI - 别对所有文件都走这步——只对
image/*类型启用，其他类型（PDF、ZIP）直接走原始 size 校验
真正容易被忽略的是：前端校验只是第一道缓冲，不是防线。Nginx 的 client_max_body_size、后端框架（如 Express 的 multer.limits.fileSize）、PHP 的 upload_max_filesize 必须和前端阈值对齐，否则用户会在毫无提示的情况下收到 413 错误，连错误原因都看不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
