filereader可读取任何file或blob对象，支持文本（readastext）、二进制（readasarraybuffer）、base64（readasdataurl）三种格式；不能读路径或url，且必须通过input.files[0]获取文件，配合onload等事件异步获取结果。
FileReader 能读什么文件类型
FileReader 只能读取 File 或 Blob 对象，不能直接读路径（比如 "./data.txt"）或 URL。上传文件后拿到的 input.files[0] 就是 File 实例，可直接传给 FileReader。
常见误区：有人试图把 input.value 当作文件路径去读——这只会得到一个伪造的路径字符串（如 "C:\fakepath\demo.pdf"），根本无法用 FileReader 处理。
- ✅ 正确方式：
const file = input.files[0]; const reader = new FileReader(); reader.readAsText(file); - ❌ 错误方式：
reader.readAsText(input.value)（类型不匹配，会静默失败） - ⚠️ 注意：
File是Blob的子类，所以所有Blob方法（如slice()）都可用
readAsText 和 readAsArrayBuffer 选哪个
取决于你后续怎么处理内容。如果目标是解析文本（JSON、CSV、代码等），用 readAsText；如果要处理二进制数据（图片校验、音频分析、加密解密），必须用 readAsArrayBuffer。
readAsDataURL 虽然也能“读”，但它返回的是 base64 字符串，体积膨胀约 33%，且无法直接还原为原始字节，不适合做数据处理。
-
readAsText(file, "UTF-8")：默认编码是 UTF-8，中文乱码多半是因为没显式指定编码（尤其读取 Windows 记事本保存的 GBK 文件） -
readAsArrayBuffer(file)：结果是ArrayBuffer，需配合Uint8Array或TextDecoder解析 - 性能差异：小文件差别不大；大文件（>10MB）用
ArrayBuffer更可控，避免字符串内存拷贝
为什么 onload 不触发？常见漏掉的三件事
FileReader 是异步 API，但错误不会抛异常，而是走 onerror，而很多人只监听 onload，导致失败时完全无感知。
- 必须设置
reader.onerror = () => { console.error(reader.error); }，否则读取权限拒绝、文件过大、编码错误都会静默失败 - 不要在
onload外访问reader.result——它只在load事件后才有效，提前读是null - 确保事件绑定在调用
readAsXXX之前，顺序错会导致错过事件（例如先reader.readAsText(file)再写reader.onload = ...）
读大文件卡死？加个进度监听
FileReader 支持 onprogress，但仅对 readAsArrayBuffer 和 readAsText 有效（readAsDataURL 不触发）。它不是精确到字节的，而是浏览器按块通知，适合做粗粒度加载提示。
注意：event.loaded 是已读字节数，event.total 是文件总大小，但某些浏览器（如 Safari）可能不提供 total，需提前缓存 file.size。
const reader = new FileReader();
reader.onprogress = (e) => {
if (e.lengthComputable) {
const percent = (e.loaded / e.total * 100).toFixed(1);
console.log(`加载中: ${percent}%`);
}
};
reader.onload = () => {
console.log("完成", reader.result);
};
reader.readAsArrayBuffer(file);
真正难处理的是超大文件（几百 MB）——FileReader 会把整个内容载入内存，容易触发 OOM。这种场景应该用 stream() + ReadableStream 分块读，而不是 FileReader。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
