当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptBlob流式读取技巧解析

JavaScriptBlob流式读取技巧解析

2025-11-23 10:59:44 0浏览收藏

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《JavaScript Blob与流式读取详解》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

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，适用于预览或下载：

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();
}