文件操作：FileReader与Blob对象使用_技术教程

FileReader是浏览器提供的用于异步读取文件内容的API，支持将File或Blob对象读取为文本、DataURL或ArrayBuffer格式；常用于图片预览、大文件分片上传等场景。通过readAsDataURL可实现上传前预览，结合Blob.slice可进行文件分片，利用URL.createObjectURL可生成临时预览链接，使用后需调用revokeObjectURL释放内存；注意读取为异步操作，不能直接访问文件路径，且单个FileReader实例只能同时处理一个任务。

在Web开发中，处理文件上传和本地文件读取是常见需求。通过 FileReader 和 Blob 对象，JavaScript 能够安全地读取用户选择的文件内容，并进行预览、分片、校验等操作。下面介绍它们的基本用法与典型场景。

FileReader 是什么？

FileReader 是浏览器提供的API，用于异步读取文件内容。它支持读取 File 或 Blob 类型的对象，并将结果以文本、DataURL、ArrayBuffer 等格式返回。

常用方法包括：

readAsText(file, encoding)：将文件读为文本字符串
readAsDataURL(file)：读为 base64 编码的 Data URL，适合图片预览
readAsArrayBuffer(file)：读为 ArrayBuffer，常用于二进制处理
readAsBinaryString(file)：读为二进制字符串（较少使用）

事件如 onload、onerror 可监听读取状态。

Blob 对象的作用

Blob（Binary Large Object）表示不可变的原始二进制数据。File 接口继承自 Blob，因此所有 File 实例都是 Blob。

你可以通过 Blob 构造函数创建部分文件或合成数据：

const blob = new Blob(["Hello, world"], { type: "text/plain" });

这在生成下载文件或处理大文件分片时非常有用。

还可以利用 URL.createObjectURL() 创建一个指向 Blob 的临时URL，用于预览或赋值给 src 属性：

const url = URL.createObjectURL(blob);
document.getElementById("preview").src = url;

使用后建议调用 URL.revokeObjectURL(url) 释放内存。

实际应用场景示例

假设要实现一个图片上传前的预览功能：

document.getElementById("fileInput").addEventListener("change", function(e) {
  const file = e.target.files[0];
  if (!file || !file.type.startsWith("image/")) return;
const reader = new FileReader();
reader.onload = function(evt) {
const img = document.getElementById("preview");
img.src = evt.target.result; // Data URL
};
reader.readAsDataURL(file);
});

对于大文件分片上传，可以结合 slice 方法使用 Blob：

const chunkSize = 1024 * 1024;
for (let start = 0; start < file.size; start += chunkSize) {
  const chunk = file.slice(start, start + chunkSize);
  uploadChunk(chunk); // 分段发送到服务器
}