首页 > 文章 > 前端

Blob与StreamAPI实战教程

时间：2026-02-07 16:11:53 333浏览收藏

大家好，今天本人给大家带来文章《JavaScript Blob与Stream API使用教程》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

Blob和Stream API是现代Web文件处理的核心，Blob用于创建和操作二进制数据对象，支持生成临时URL实现文件下载或切片上传；ReadableStream则通过流式读取避免大文件加载的内存压力，适用于进度监控、大型CSV生成等场景。两者结合可高效实现文件的分块传输与动态生成，提升性能。需注意内存释放、流不可重复读及浏览器兼容性问题。掌握它们意味着掌握前端高效文件处理的关键能力。

JavaScript文件操作_Blob与Stream API详解

在现代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供下载或显示：

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 1\n'));
    controller.enqueue(new TextEncoder().encode('Part 2\n'));
    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，能让你更灵活地处理文件相关需求，从简单的下载到复杂的流式传输都能游刃有余。关键是理解数据不再必须“全量加载”，而是可以“逐步流动”这一理念。

今天关于《Blob与StreamAPI实战教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于blob的内容请关注golang学习网公众号！

前往漫画官网入口并下载 ➜

blob