Blob适合小数据整体操作，Stream更适合大数据渐进式处理。Blob表示不可变二进制数据，可用于生成文件下载；ReadableStream实现流式读取大文件，提升性能；二者可相互转换，支持高效文件处理场景如分片上传、实时媒体处理等。
在现代Web开发中，处理文件不再局限于上传和下载。随着前端能力的增强，JavaScript已经能够直接操作二进制数据、生成文件、分片读取大文件等。这其中，Blob 和 Stream API 是两个核心工具，它们让浏览器端的文件操作更加高效和灵活。
Blob：代表不可变的原始二进制数据
Blob（Binary Large Object）是JavaScript中用于表示不可变原始二进制数据的对象。它可以存储图像、音频、视频、PDF等任意类型的数据，并支持按类型设置MIME。
常见用途包括：- 从用户选择的文件创建Blob对象（通过FileReader或直接访问File）
- 将字符串或ArrayBuffer打包成Blob以便后续使用
- 生成可下载的本地文件（结合URL.createObjectURL）
示例：创建一个文本Blob并触发下载
const blob = new Blob(["Hello, 下载我！"], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "message.txt";
a.click();
URL.revokeObjectURL(url); // 清理内存
ReadableStream：流式处理大型文件更高效
当面对大文件时，一次性加载全部内容会占用大量内存。Stream API 提供了逐块读取的能力，使我们可以“边读边处理”，显著提升性能和响应速度。
立即学习“Java免费学习笔记（深入）”；
ReadableStream 是 Streams API 的一部分，允许你以异步方式分块消费数据流。它特别适用于：
- 读取大体积文件而不阻塞主线程
- 实现进度反馈（如上传/下载进度条）
- 与Fetch API配合进行流式网络响应解析
示例：从文件输入中获取流并逐段读取
async function processFileWithStream(file) {
const stream = file.stream();
const reader = stream.getReader();
let result = "";
while (true) {
const { done, value } = await reader.read();
if (done) break;
result += new TextDecoder().decode(value, { stream: true });
console.log("已读取块:", value.length, "字节");
}
console.log("完整内容:", result);
}
// 调用
const input = document.querySelector("input[type=file]");
input.addEventListener("change", e => {
const file = e.target.files[0];
if (file) processFileWithStream(file);
});
Blob 与 Stream 的转换与协作
Blob 和 Stream 可以互相配合使用。比如你可以从 Blob 创建一个流，也可以把多个流合并后写入一个新的 Blob。
- Blob → Stream：调用 blob.stream() 即可获得 ReadableStream
- Stream → Blob：需要手动收集所有chunk，然后构造Blob
示例：将流数据收集为Blob
async function streamToBlob(stream, mimeType = "application/octet-stream") {
const reader = stream.getReader();
const chunks = [];
while (true) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
}
return new Blob(chunks, { type: mimeType });
}
这种模式常用于中间处理场景，例如解密流数据后再保存为Blob供下载。
实际应用场景建议
结合 Blob 和 Stream 可以构建高性能的前端文件处理器：
- 大文件预览：用流读取前几KB判断文件类型或显示头部信息
- 加密/压缩：对流式数据进行分段加密或压缩，避免内存溢出
- 断点续传基础：利用Blob.slice()实现文件分片上传
- 实时处理媒体流：配合MediaRecorder输出Blob流进行录制
基本上就这些。掌握 Blob 和 Stream 不仅能优化文件操作体验，也为构建复杂Web应用打下基础。关键是理解“整体”与“流动”的区别——Blob适合小数据整体操作，Stream更适合大数据的渐进式处理。
