Blob是JavaScript中处理二进制数据的对象，支持通过流式读取分块处理大文件，结合TransformStream可实现高效转换，适用于上传、预览、音视频处理等场景。
在现代Web开发中，处理大文件或二进制数据时，直接加载整个文件到内存中会造成性能问题。JavaScript中的 Blob 和流式处理技术提供了一种高效、低内存消耗的方式来读取和操作文件内容。这种技术特别适用于上传大文件、视频剪辑、日志分析等场景。
什么是Blob？
Blob（Binary Large Object）是JavaScript中表示不可变原始二进制数据的对象。它可以存储图片、音频、视频、文本等各种类型的数据。Blob对象可以通过文件输入（File API）、网络请求（如fetch）或手动构造生成。
创建一个简单的Blob示例：
const blob = new Blob(["Hello, world!"], { type: "text/plain" });
console.log(blob.size); // 输出: 13
console.log(blob.type); // 输出: text/plain
使用Blob进行流式读取
对于大文件，我们可以利用 ReadableStream 和 Response.body 的流机制，配合Blob进行分块读取，避免一次性加载全部数据。
立即学习“Java免费学习笔记（深入）”；
HTML中选择文件后获取其流：
document.getElementById("fileInput").addEventListener("change", async (event) => {
const file = event.target.files[0];
if (!file) return;
const stream = file.stream();
const reader = stream.getReader();
let result = await reader.read();
while (!result.done) {
// 处理每一块数据（Uint8Array）
console.log("Chunk:", result.value);
result = await reader.read();
}
console.log("读取完成");
});
这种方式允许你逐块处理文件内容，非常适合需要边读边处理的场景，比如计算哈希值、压缩或加密。
结合TransformStream实现流式转换
你可以使用 TransformStream 在流的传输过程中对数据进行处理。例如，将文本内容转为大写，或进行编码转换。
示例：将文件内容实时转为大写并生成新Blob：
async function processFileAsUppercase(file) {
const upperCaseTransform = new TransformStream({
transform(chunk, controller) {
const text = new TextDecoder().decode(chunk);
const upperText = text.toUpperCase();
const encoded = new TextEncoder().encode(upperText);
controller.enqueue(encoded);
}
});
const readableStream = file.stream();
const transformedStream = readableStream.pipeThrough(upperCaseTransform);
// 将处理后的流构造成新的Blob
const processedBlob = await new Response(transformedStream).blob();
return processedBlob;
}
这个方法不会将整个文件加载进内存，而是以流的形式逐步处理，极大提升效率和响应速度。
实际应用场景
- 大文件上传切片：通过流读取文件并按固定大小切块，配合断点续传。
- 前端文件预览：对用户上传的文本或日志文件进行前几KB的流式读取，快速展示部分内容。
- 音视频处理：结合Web Audio API或Web Codecs，对媒体Blob进行流式解码或剪辑。
- 数据校验：在不完全加载文件的情况下，流式计算MD5或SHA校验和。
基本上就这些。Blob结合流式处理是现代浏览器提供的强大能力，合理使用能显著提升应用性能和用户体验。不复杂但容易忽略细节，比如字符编码处理和异步控制。掌握它，前端也能高效“操作文件”。
