Blob用于处理小到中等大小的二进制文件,支持创建、下载和读取文件;2. Stream通过分块处理实现高效的大数据流操作,提升性能;3. 两者可相互转换,适应不同场景,合理使用可显著优化Web应用的文件处理能力。

在Web开发中,直接操作文件系统受到浏览器安全策略的限制,但通过 Blob 和 Stream,JavaScript 可以高效处理文件数据,实现下载、上传、切片、转换等操作。这类技术广泛应用于大文件上传、视频剪辑预览、日志导出等场景。
Blob:二进制大对象处理
Blob(Binary Large Object)表示不可变的原始二进制数据,常用于表示文件内容,比如图片、音频、文本等。它体积小、兼容性好,适合小到中等大小的文件操作。
常见用途:- 创建文件并触发下载
- 将 Canvas 内容转为图片文件
- 作为 File 的父类,用于上传或读取
const content = 'Hello, this is a test file.';
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'test.txt';
a.click();
// 清理内存
URL.revokeObjectURL(url);
从 Blob 获取数据:
使用 FileReader 读取 Blob 内容:
const reader = new FileReader();
reader.onload = function(e) {
console.log(e.target.result); // 输出文本内容
};
reader.readAsText(blob);
Stream:高效处理大数据流
当处理大文件(如视频、日志、压缩包)时,一次性加载到内存会消耗巨大资源。此时应使用 Streams API,它允许分块读取和处理数据,提升性能与响应速度。
10分钟内自己学会PHP其中,第1篇为入门篇,主要包括了解PHP、PHP开发环境搭建、PHP开发基础、PHP流程控制语句、函数、字符串操作、正则表达式、PHP数组、PHP与Web页面交互、日期和时间等内容;第2篇为提高篇,主要包括MySQL数据库设计、PHP操作MySQL数据库、Cookie和Session、图形图像处理技术、文件和目录处理技术、面向对象、PDO数据库抽象层、程序调试与错误处理、A
- ReadableStream:可读流,用于读取数据块
- WritableStream:可写流,用于写入数据块
- TransformStream:转换流,连接读写,中间处理数据
fetch('/large-file.txt')
.then(response => {
const reader = response.body.getReader();
return new ReadableStream({
start(controller) {
function push() {
reader.read().then(({ done, value }) => {
if (done) {
controller.close();
return;
}
controller.enqueue(value);
push();
});
}
push();
}
});
})
.then(stream => {
return new Response(stream).text();
})
.then(text => console.log(text));
实际应用:压缩或编码转换
使用 TransformStream 对流数据进行实时处理:
const transform = new TransformStream({
transform(chunk, controller) {
// 将每一块转为大写(示例)
const upperChunk = chunk.toUpperCase();
controller.enqueue(upperChunk);
}
});
const writer = transform.writable.getWriter();
writer.write('hello');
writer.write('world');
writer.close();
// 从 transform.readable 读取处理后的数据
Blob 与 Stream 的转换
两者可以互相转换,适应不同处理阶段的需求。
立即学习“Java免费学习笔记(深入)”;
Blob 转 Stream:const blob = new Blob(['Some data'], { type: 'text/plain' });
const stream = blob.stream(); // 返回 ReadableStream
Stream 转 Blob:
收集流数据后构造 Blob:
async function streamToBlob(stream, mimeType = 'text/plain') {
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 简单直接,适合常规文件操作;Stream 更强大,适合高性能、低内存的大数据处理。合理选择能显著提升用户体验。









