系统地梳理一下 FileReader 的几种读取方式在本质区别、使用场景和性能表现上的差异：
📌 FileReader 四种主要读取方法对比
| 方法 | 返回值类型 | 适用场景 | 性能/注意事项 |
|---|---|---|---|
readAsText(file, encoding?) |
string |
纯文本（如 .txt, .json, .csv） |
需要指定编码（默认 UTF-8），内部会进行字符解码，有一定开销；不适用于二进制文件 |
readAsDataURL(file) |
string（Data URL，如 data:image/png;base64,...） |
图片预览、小文件 Base64 传输 | 体积膨胀约 33%（Base64 编码特性），不适合大文件，内存占用高 |
readAsArrayBuffer(file) |
ArrayBuffer |
二进制处理（加密、音视频、图像像素操作、自定义协议解析） | 最高效，直接映射原始字节，零拷贝（在底层），适合高性能场景 |
readAsArrayBuffer() + TextDecoder |
string |
高性能文本读取（替代 readAsText） |
推荐用于现代浏览器：避免 FileReader 内部冗余逻辑，TextDecoder 更快更可控 |
🔍 本质区别解析
-
数据表示层级不同：
readAsText()和readAsDataURL()返回的是高层抽象字符串。readAsArrayBuffer()返回的是底层原始二进制数据（ArrayBuffer），可被Uint8Array、DataView等视图操作。
-
编码处理时机不同：
readAsText()在读取时立即解码为字符串（依赖指定或默认编码）。readAsArrayBuffer()不解码，保留原始字节，后续可用TextDecoder按需解码（更灵活、高效）。
-
内存与性能：
readAsDataURL()会先读取二进制，再转为 Base64 字符串，双重内存占用 + 编码开销。readAsArrayBuffer()直接暴露内存块，无额外转换，适合流式或批量处理。
✅ 最佳实践建议
-
读取文本？
👉 优先使用：const arrayBuffer = await file.arrayBuffer(); // 或通过 FileReader.readAsArrayBuffer() const text = new TextDecoder('utf-8').decode(arrayBuffer);现代浏览器支持
File.prototype.arrayBuffer()，无需 FileReader，更简洁高效。 -
预览图片？
👉 小图可用URL.createObjectURL(file)（非 FileReader），性能优于readAsDataURL()，且无体积膨胀。用完记得URL.revokeObjectURL()。 -
处理二进制（如 ZIP、加密文件、WAV）？
👉 必须用readAsArrayBuffer()或file.arrayBuffer()。
💡 补充：现代替代方案（无需 FileReader）
// 文本（推荐）
const text = await file.text();// 二进制
const buffer = await file.arrayBuffer();// 转 Data URL（不推荐大文件）
const dataUrl = await new Promise(r => {const fr = new FileReader();fr.onload = () => r(fr.result);fr.readAsDataURL(file);
});
File对象本身已支持.text()、.arrayBuffer()等方法（基于 Promise），比 FileReader 更简洁、异步友好。