FileReader API 全攻略：以不同格式异步读取本地二进制文件-H5教程-PHP中文网

filereader api是浏览器原生异步文件读取机制，用于解析用户选择的file/blob对象，支持readasdataurl、readastext、readasarraybuffer和已弃用的readasbinarystring四种方法，需通过load/error等事件获取结果。

filereader api 全攻略：以不同格式异步读取本地二进制文件

FileReader API 是浏览器原生支持的异步文件读取机制，专为处理用户本地选择的 File 或 Blob 对象设计。它不上传文件，只在前端解析内容，适用于预览、校验、编码转换或准备上传数据等场景。关键在于：所有读取操作都是异步的，必须通过事件监听获取结果，不能同步取值。

四种核心读取方式及适用场景

FileReader 提供四个主要读取方法，每种生成的数据类型和用途不同：

readAsDataURL(file)：将文件转为 base64 编码的 Data URL 字符串（如 data:image/png;base64,iVBORw...）。适合图片预览、小图标内联、或后端接受 base64 的接口。
readAsText(file, encoding)：按字符解码读取文本内容，默认 UTF-8。适用于 .txt、.json、.csv、.log 等纯文本文件。第二个参数可指定编码（如 "gbk" 处理中文旧文档）。
readAsArrayBuffer(file)：读取为原始二进制缓冲区（ArrayBuffer）。适合需要精细字节操作的场景，比如音频/视频元信息解析、加密、压缩、或通过 fetch 上传二进制流。
readAsBinaryString(file)：读取为每个字节对应一个 Unicode 字符的字符串（已不推荐，兼容性差且易出错）。现代开发应优先用 ArrayBuffer + Uint8Array 替代。

正确监听读取结果的写法

调用读取方法后，reader.result 在完成前始终为空或 undefined。必须绑定 load 事件才能安全获取结果：

成功时触发 load，此时 reader.result 已就绪；
失败时触发 error，可通过 reader.error.code 判断错误类型（1=未找到，2=安全限制，3=中断，4=不可读，5=编码错误）；
可选监听 progress 获取加载进度（e.loaded / e.total），对大文件友好；
loadend 总是最后触发，无论成败，适合做统一收尾清理。

实用代码结构示例

以下是一个兼顾健壮性和通用性的模板：

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', e => {
  const file = e.target.files[0];
  if (!file) return;
<p>const reader = new FileReader();</p><p>// 成功回调
reader.onload = () => {
const data = reader.result; // 根据所用 readAsXxx 方法，data 类型不同
console.log('读取完成:', data);
// 此处处理数据：显示图片、解析 JSON、上传等
};</p><p>// 错误处理
reader.onerror = () => {
console.error('读取失败，错误码:', reader.error?.code);
};</p><p>// 进度反馈（可选）
reader.onprogress = e => {
if (e.lengthComputable) {
const percent = (e.loaded / e.total * 100).toFixed(1);
console.log(<code>加载中... ${percent}%</code>);
}
};</p><p>// 启动读取（任选其一）
reader.readAsDataURL(file);     // 图片预览
// reader.readAsText(file);     // 文本内容
// reader.readAsArrayBuffer(file); // 二进制处理
});</p>