Blob和Stream API是现代Web文件处理的核心，Blob用于创建和操作二进制数据对象，支持生成临时URL实现文件下载或切片上传；ReadableStream则通过流式读取避免大文件加载的内存压力，适用于进度监控、大型CSV生成等场景。两者结合可高效实现文件的分块传输与动态生成，提升性能。需注意内存释放、流不可重复读及浏览器兼容性问题。掌握它们意味着掌握前端高效文件处理的关键能力。
在现代Web开发中，JavaScript处理文件的能力越来越强。虽然浏览器出于安全考虑限制了对本地文件系统的直接访问，但通过 Blob 和 Stream API，我们可以高效地操作文件数据，实现下载、上传、切片、压缩等复杂功能。本文将深入讲解这两个核心API的使用场景与实践方法。
Blob：二进制大对象的基础用法
Blob（Binary Large Object）表示不可变的原始二进制数据，常用于处理图片、视频、PDF等文件类型。它不依赖磁盘路径，而是以内存中的数据块形式存在。
创建一个Blob非常简单：
const data = 'Hello, this is a text file content';
const blob = new Blob([data], { type: 'text/plain' });
你可以为Blob指定MIME类型，比如 image/png 或 application/pdf。之后可以通过URL.createObjectURL生成临时URL供下载或显示：
立即学习“Java免费学习笔记（深入）”；
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'hello.txt';
a.click();
URL.revokeObjectURL(url); // 释放内存
Blob还支持切片操作，类似数组的slice方法，适合大文件分块上传：
const chunk = blob.slice(0, 1024, 'text/plain'); // 取前1KB
ReadableStream：流式处理大数据
当处理大文件时，一次性加载到内存可能导致性能问题。而 ReadableStream 允许我们以“流”的方式逐步读取数据，提升效率并降低内存占用。
现代浏览器中，fetch响应体就是一个可读流：
const response = await fetch('/large-file.txt');
const reader = response.body.getReader();
const decoder = new TextDecoder();
while (true) {
const { done, value } = await reader.read();
if (done) break;
console.log(decoder.decode(value)); // 分段处理内容
}
你也可以手动创建流：
const stream = new ReadableStream({
start(controller) {
controller.enqueue(new TextEncoder().encode('Part 1\n'));
controller.enqueue(new TextEncoder().encode('Part 2\n'));
controller.close();
}
});
之后可以将其转换为Response或Blob进行进一步操作：
const response = new Response(stream); const blob = await response.blob();
结合Blob与Stream的实际应用场景
在真实项目中，两者经常配合使用。例如实现一个大文件下载进度监控：
async function downloadWithProgress(url, onProgress) {
const response = await fetch(url);
const contentLength = response.headers.get('Content-Length');
const total = parseInt(contentLength, 10);
let loaded = 0;
const chunks = [];
const reader = response.body.getReader();
while (true) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
loaded += value.length;
onProgress(loaded / total);
}
const fullBlob = new Blob(chunks);
return fullBlob;
}
另一个常见用途是生成大型CSV文件而不卡顿页面：
function generateLargeCSVStream(rows) {
return new ReadableStream({
async start(controller) {
for (const row of rows) {
const line = row.join(',') + '\n';
controller.enqueue(new TextEncoder().encode(line));
}
controller.close();
}
});
}
// 使用
const stream = generateLargeCSVStream(data);
const response = new Response(stream);
const blob = await response.blob();
const url = URL.createObjectURL(blob);
兼容性与注意事项
Blob在所有现代浏览器中都已广泛支持。ReadableStream属于WHATWG Stream标准，在主流浏览器中可用，但在旧版IE或部分移动浏览器中可能受限。
使用时注意以下几点：
- 每次调用
URL.createObjectURL()后应尽快调用revokeObjectURL()防止内存泄漏 - 流一旦关闭或读取完毕，不能重复读取，需重新请求
- 在Service Worker或Worker线程中也能使用Stream，适合后台任务
- 某些环境下（如Node.js），需使用polyfill或Node原生stream模块
基本上就这些。掌握Blob和Stream API，能让你更灵活地处理文件相关需求，从简单的下载到复杂的流式传输都能游刃有余。关键是理解数据不再必须“全量加载”，而是可以“逐步流动”这一理念。
