JavaScript文件操作_Blob与Stream API-js教程-PHP中文网

JavaScript文件操作_Blob与Stream API

夜晨

发布： 2025-11-23 23:26:02

原创

714人浏览过

Blob适合小数据整体操作，Stream更适合大数据渐进式处理。Blob表示不可变二进制数据，可用于生成文件下载；ReadableStream实现流式读取大文件，提升性能；二者可相互转换，支持高效文件处理场景如分片上传、实时媒体处理等。

javascript文件操作_blob与stream api

在现代Web开发中，处理文件不再局限于上传和下载。随着前端能力的增强，JavaScript已经能够直接操作二进制数据、生成文件、分片读取大文件等。这其中，Blob 和 Stream API 是两个核心工具，它们让浏览器端的文件操作更加高效和灵活。

Blob：代表不可变的原始二进制数据

Blob（Binary Large Object）是JavaScript中用于表示不可变原始二进制数据的对象。它可以存储图像、音频、视频、PDF等任意类型的数据，并支持按类型设置MIME。

常见用途包括：

从用户选择的文件创建Blob对象（通过FileReader或直接访问File）
将字符串或ArrayBuffer打包成Blob以便后续使用
生成可下载的本地文件（结合URL.createObjectURL）

示例：创建一个文本Blob并触发下载

const blob = new Blob(["Hello, 下载我！"], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "message.txt";
a.click();
URL.revokeObjectURL(url); // 清理内存

登录后复制

ReadableStream：流式处理大型文件更高效

当面对大文件时，一次性加载全部内容会占用大量内存。Stream API 提供了逐块读取的能力，使我们可以“边读边处理”，显著提升性能和响应速度。

立即学习“Java免费学习笔记（深入）”；

ReadableStream 是 Streams API 的一部分，允许你以异步方式分块消费数据流。它特别适用于：

读取大体积文件而不阻塞主线程
实现进度反馈（如上传/下载进度条）
与Fetch API配合进行流式网络响应解析

示例：从文件输入中获取流并逐段读取

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

407

查看详情

async function processFileWithStream(file) {
  const stream = file.stream();
  const reader = stream.getReader();

  let result = "";
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    result += new TextDecoder().decode(value, { stream: true });
    console.log("已读取块:", value.length, "字节");
  }
  console.log("完整内容:", result);
}
// 调用
const input = document.querySelector("input[type=file]");
input.addEventListener("change", e => {
  const file = e.target.files[0];
  if (file) processFileWithStream(file);
});

登录后复制

Blob 与 Stream 的转换与协作

Blob 和 Stream 可以互相配合使用。比如你可以从 Blob 创建一个流，也可以把多个流合并后写入一个新的 Blob。

Blob → Stream：调用 blob.stream() 即可获得 ReadableStream
Stream → Blob：需要手动收集所有chunk，然后构造Blob

示例：将流数据收集为Blob

async function streamToBlob(stream, mimeType = "application/octet-stream") {
  const reader = stream.getReader();
  const chunks = [];
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    chunks.push(value);
  }
  return new Blob(chunks, { type: mimeType });
}

登录后复制

这种模式常用于中间处理场景，例如解密流数据后再保存为Blob供下载。