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 1n')); controller.enqueue(new TextEncoder().encode('Part 2n')); 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，能让你更灵活地处理文件相关需求，从简单的下载到复杂的流式传输都能游刃有余。关键是理解数据不再必须“全量加载”，而是可以“逐步流动”这一理念。
以上就是JavaScript文件操作_Blob与Stream API详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540856.html
微信扫一扫 
支付宝扫一扫 
