onerror 事件在 <input type="file"> 上无效，需改用 FileReader.onerror 捕获读取异常；上传异常须通过 fetch.catch、response.ok 或 AbortController 处理。
onerror 事件在 <input type="file"> 上根本不会触发
很多人试图给 <input type="file"> 绑定 onerror，比如：
<input type="file" onerror="console.log('error!')">这是无效的。HTML 表单控件本身不抛出可被 onerror 捕获的错误，它既不会因用户取消选择、文件过大、类型不符而触发该事件。
真正要监听的是 FileReader 的 onerror
上传异常（如读取失败、编码错误、文件损坏）发生在 FileReader 实例层面，必须在其上监听：
-
reader.onerror：捕获读取失败（例如文件被其他进程占用、权限不足、磁盘 I/O 错误） -
reader.onload和reader.onloadend：区分成功完成与“完成但出错” - 注意：
reader.error是一个DOMException对象，其name字段常见值包括"AbortError"、"NotFoundError"、"SecurityError"
const reader = new FileReader();
reader.onerror = () => {
console.error('FileReader error:', reader.error?.name, reader.error?.message);
};
reader.readAsText(file); // 或 readAsArrayBuffer 等
前端能预判的异常，得靠 input.files 和限制逻辑主动拦截
浏览器不会自动阻止超大文件或不支持类型——它只让 input.files 返回空列表（用户取消）或含非法项（如大小超标但未报错）。你需要手动检查：
-
input.files.length === 0→ 用户点了取消或没选任何文件 -
file.size > MAX_SIZE→ 提前提示“文件不能超过 5MB”，避免启动FileReader -
!ALLOWED_TYPES.includes(file.type)→ 注意file.type可能为空（尤其本地文件），建议同时用file.name.split('.').pop().toLowerCase()辅助判断扩展名 - 不要依赖
accept属性做唯一校验，它仅影响文件选择器界面，可被绕过
网络上传阶段的异常只能靠 fetch 或 XMLHttpRequest 捕获
FileReader 只负责读取本地文件；真正“上传”是后续发起的网络请求。此时异常来源完全不同：
立即学习“前端免费学习笔记（深入）”；
-
fetch(...).catch()：捕获连接失败、CORS、网络中断 -
response.ok === false：服务端返回 4xx/5xx 状态码（如 413 Payload Too Large） -
AbortController：手动中止上传，触发err.name === "AbortError" - 大文件上传建议分片 + 断点续传，否则单次
fetch超时或内存溢出会导致静默失败
容易被忽略的一点：Chrome 对超大 Blob 直接传给 fetch 有隐式内存限制，可能卡死或崩溃——应优先转为 FormData 并流式提交。
