JavaScript文件操作_Blob对象与流式读取方案-js教程-PHP中文网

JavaScript文件操作_Blob对象与流式读取方案

幻影之瞳

发布： 2025-11-21 19:37:02

原创

490人浏览过

Blob对象和流式读取可高效处理大文件。通过new Blob()创建二进制对象，结合URL.createObjectURL()实现下载预览；使用ReadableStream或File.slice()分块读取，避免内存溢出，适用于上传、预览、日志分析等场景。

javascript文件操作_blob对象与流式读取方案

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);<br>const a = document.createElement("a");<br>a.href = url;<br>a.download = "file.txt";<br>a.click();<br>URL.revokeObjectURL(url); // 释放内存

登录后复制

流式读取：处理大文件不卡顿

传统FileReader一次性加载文件容易导致页面卡死，尤其面对GB级文件。使用ReadableStream可分块读取，实现流式处理。

AssemblyAI

转录和理解语音的AI模型

查看详情

现代浏览器支持fetch + Response.body流读取：

async function readLargeFile(url) {<br>  const response = await fetch(url);<br>  const reader = response.body.getReader();<br>  let receivedLength = 0;<br>  while(true) {<br>    const { done, value } = await reader.read();<br>    if (done) break;<br>    receivedLength += value.length;<br>    // 处理chunk：发送、解析、写入等<br>    console.log(`Received ${receivedLength} bytes`);<br>  }<br>}

登录后复制

对于本地文件，可通过File API结合slice分块模拟流式读取：

function processFileInChunks(file, chunkSize = 1024 * 1024) {<br>  let offset = 0;<br>  function readNext() {<br>    if (offset >= file.size) return;<br>    const blob = file.slice(offset, offset + chunkSize);<br>    const reader = new FileReader();<br>    reader.onload = function(e) {<br>      // 处理e.target.result<br>      offset += chunkSize;<br>      readNext();<br>    };<br>    reader.readAsArrayBuffer(blob);<br>  }<br>  readNext();<br>}

登录后复制