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

JavaScript文件操作_Blob与Stream处理

幻影之瞳

发布： 2025-11-23 21:42:06

原创

331人浏览过

Blob用于处理小到中等大小的二进制文件，支持创建、下载和读取文件；2. Stream通过分块处理实现高效的大数据流操作，提升性能；3. 两者可相互转换，适应不同场景，合理使用可显著优化Web应用的文件处理能力。

javascript文件操作_blob与stream处理

在Web开发中，直接操作文件系统受到浏览器安全策略的限制，但通过 Blob 和 Stream，JavaScript 可以高效处理文件数据，实现下载、上传、切片、转换等操作。这类技术广泛应用于大文件上传、视频剪辑预览、日志导出等场景。

Blob：二进制大对象处理

Blob（Binary Large Object）表示不可变的原始二进制数据，常用于表示文件内容，比如图片、音频、文本等。它体积小、兼容性好，适合小到中等大小的文件操作。

常见用途：

创建文件并触发下载
将 Canvas 内容转为图片文件
作为 File 的父类，用于上传或读取

示例：生成文本文件并下载

const content = 'Hello, this is a test file.';
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

const a = document.createElement('a');
a.href = url;
a.download = 'test.txt';
a.click();

// 清理内存
URL.revokeObjectURL(url);

登录后复制

从 Blob 获取数据：使用 FileReader 读取 Blob 内容：

const reader = new FileReader();
reader.onload = function(e) {
  console.log(e.target.result); // 输出文本内容
};
reader.readAsText(blob);

登录后复制

Stream：高效处理大数据流

当处理大文件（如视频、日志、压缩包）时，一次性加载到内存会消耗巨大资源。此时应使用 Streams API，它允许分块读取和处理数据，提升性能与响应速度。

10分钟内自己学会PHP

10分钟内自己学会PHP其中，第1篇为入门篇，主要包括了解PHP、PHP开发环境搭建、PHP开发基础、PHP流程控制语句、函数、字符串操作、正则表达式、PHP数组、PHP与Web页面交互、日期和时间等内容；第2篇为提高篇，主要包括MySQL数据库设计、PHP操作MySQL数据库、Cookie和Session、图形图像处理技术、文件和目录处理技术、面向对象、PDO数据库抽象层、程序调试与错误处理、A

524

查看详情

Streams 核心概念：

ReadableStream：可读流，用于读取数据块
WritableStream：可写流，用于写入数据块
TransformStream：转换流，连接读写，中间处理数据

示例：通过 fetch 获取流式响应

fetch('/large-file.txt')
  .then(response => {
    const reader = response.body.getReader();
    return new ReadableStream({
      start(controller) {
        function push() {
          reader.read().then(({ done, value }) => {
            if (done) {
              controller.close();
              return;
            }
            controller.enqueue(value);
            push();
          });
        }
        push();
      }
    });
  })
  .then(stream => {
    return new Response(stream).text();
  })
  .then(text => console.log(text));

登录后复制

实际应用：压缩或编码转换使用 TransformStream 对流数据进行实时处理：

const transform = new TransformStream({
  transform(chunk, controller) {
    // 将每一块转为大写（示例）
    const upperChunk = chunk.toUpperCase();
    controller.enqueue(upperChunk);
  }
});

const writer = transform.writable.getWriter();
writer.write('hello');
writer.write('world');
writer.close();

// 从 transform.readable 读取处理后的数据

登录后复制

Blob 与 Stream 的转换

两者可以互相转换，适应不同处理阶段的需求。

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

Blob 转 Stream：

const blob = new Blob(['Some data'], { type: 'text/plain' });
const stream = blob.stream(); // 返回 ReadableStream

登录后复制

Stream 转 Blob：收集流数据后构造 Blob：

async function streamToBlob(stream, mimeType = 'text/plain') {
  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 简单直接，适合常规文件操作；Stream 更强大，适合高性能、低内存的大数据处理。合理选择能显著提升用户体验。

以上就是JavaScript文件操作_Blob与Stream处理的详细内容，更多请关注php中文网其它相关文章！