17370845950

onerror 事件在 上无效，需改用 FileReader.onerror 捕获读取异常；上传异常须通过 fetch.catch、response.ok 或 AbortController 处理。

onerror 事件在 上根本不会触发

很多人试图给 绑定 onerror，比如：

这是无效的。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 并流式提交。