Blob对象和流式读取可高效处理大文件。通过new Blob()创建二进制对象，结合URL.createObjectURL()实现下载预览；使用ReadableStream或File.slice()分块读取，避免内存溢出，适用于上传、预览、日志分析等场景。
JavaScript中处理文件操作时，Blob对象和流式读取是高效处理大文件或二进制数据的关键技术。它们避免将整个文件加载到内存中，提升性能并减少资源消耗。以下介绍Blob的基本用法与如何结合流式读取实现高效的文件处理方案。
Blob对象：构建与使用
Blob（Binary Large Object）表示不可变的原始二进制数据。它常用于文件上传、下载、截图保存等场景。
创建Blob对象：
- 从字符串生成Blob：
const blob = new Blob(["Hello, world!"], { type: "text/plain" }); - 从ArrayBuffer创建：
const buffer = new ArrayBuffer(8); const blob = new Blob([buffer], { type: "application/octet-stream" }); - 合并多个数据源：
const blob = new Blob([arrayBuffer, string, blobPart], { type: "video/mp4" });
通过URL.createObjectURL()可将Blob转为可访问的URL，适用于预览或下载：
立即学习“Java免费学习笔记（深入）”；
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "file.txt";
a.click();
URL.revokeObjectURL(url); // 释放内存
流式读取：处理大文件不卡顿
传统FileReader一次性加载文件容易导致页面卡死，尤其面对GB级文件。使用ReadableStream可分块读取，实现流式处理。
现代浏览器支持fetch + Response.body流读取：
async function readLargeFile(url) {
const response = await fetch(url);
const reader = response.body.getReader();
let receivedLength = 0;
while(true) {
const { done, value } = await reader.read();
if (done) break;
receivedLength += value.length;
// 处理chunk：发送、解析、写入等
console.log(`Received ${receivedLength} bytes`);
}
}对于本地文件，可通过File API结合slice分块模拟流式读取：
function processFileInChunks(file, chunkSize = 1024 * 1024) {
let offset = 0;
function readNext() {
if (offset >= file.size) return;
const blob = file.slice(offset, offset + chunkSize);
const reader = new FileReader();
reader.onload = function(e) {
// 处理e.target.result
offset += chunkSize;
readNext();
};
reader.readAsArrayBuffer(blob);
}
readNext();
}实际应用场景建议
在真实项目中，结合Blob与流式读取可优化以下场景：
- 大文件上传：分块读取为ArrayBuffer，转成Blob后通过FormData上传，支持断点续传。
- 视频/音频剪辑预览：截取文件头部部分数据生成Blob URL，快速预览而无需全量加载。
- 日志分析工具：逐行读取大型日志文件，避免内存溢出。
- 加密/解密大文件：流式处理每个chunk，完成后再合并输出新Blob。
基本上就这些。掌握Blob与流式读取机制，能让前端更从容应对各类文件操作需求，尤其在资源受限环境下优势明显。不复杂但容易忽略细节，比如及时释放ObjectURL、合理设置chunk大小等。
