JavaScript文件操作_Blob与StreamAPI应用-js教程-PHP中文网

JavaScript文件操作_Blob与StreamAPI应用

紅蓮之龍

发布： 2025-11-24 19:08:02

原创

158人浏览过

Blob和Stream API提升Web文件处理能力，支持客户端高效操作大文件。1. Blob封装二进制数据，可创建、切片、生成URL预览或下载；2. FileReader读取Blob内容实现本地预览；3. ReadableStream流式加载避免内存溢出，适合大文件边下载边处理；4. TransformStream实时转换流数据，构建压缩、加密等处理链。结合使用优化大文件上传与弱网体验，需注意释放URL和兼容性降级。

javascript文件操作_blob与streamapi应用

在现代Web开发中，JavaScript处理文件的方式已经从简单的上传下载演进到可以在客户端进行复杂操作。特别是Blob与Stream API的引入，让浏览器端具备了更强大的文件读取、切片、转换和传输能力。掌握这些技术，能显著提升文件处理性能，尤其是在大文件上传、视频剪辑预览、离线编辑等场景下非常实用。

Blob：二进制大对象的基本操作

Blob（Binary Large Object）表示不可变的原始二进制数据。它常用于表示音频、视频、图像或任意文件内容。

创建一个Blob很简单：

const data = 'Hello, I am a text file';
const blob = new Blob([data], { type: 'text/plain' });

登录后复制

你可以通过URL.createObjectURL()生成一个临时URL来预览或下载Blob：

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

const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'hello.txt';
a.click();
URL.revokeObjectURL(url); // 释放内存

登录后复制

Blob还支持切片操作，这对大文件分块上传特别有用：

const chunk = blob.slice(0, 1024, 'text/plain'); // 取前1KB

登录后复制

FileReader与Blob结合实现本地读取

虽然Blob本身不能直接读取内容，但可以通过FileReader将其转为文本、DataURL或ArrayBuffer：

const reader = new FileReader();
reader.onload = function(e) {
  console.log(e.target.result); // 读取结果
};
reader.readAsText(blob); // 或 readAsDataURL, readAsArrayBuffer
</font>

登录后复制

这在用户选择文件后立即预览内容时非常常见，比如图片上传前的缩略图展示。

Vheer

AI图像处理平台

125

查看详情

ReadableStream：流式处理大数据

当文件过大时，一次性加载到内存会造成卡顿甚至崩溃。ReadableStream允许我们以“流”的方式逐块处理数据，节省内存并提高响应速度。

现代浏览器中，fetch返回的response.body就是一个ReadableStream：

const response = await fetch('/large-file.bin');
const reader = response.body.getReader();
let receivedLength = 0;
let chunks = [];

while(true) {
  const { done, value } = await reader.read();
  if (done) break;
  chunks.push(value);
  receivedLength += value.length;
  console.log(`已接收 ${receivedLength} 字节`);
}
// 合并所有chunk
const allBytes = new Uint8Array(receivedLength);
let position = 0;
for(const chunk of chunks) {
  allBytes.set(chunk, position);
  position += chunk.length;
}
const resultBlob = new Blob([allBytes]);

登录后复制

这种方式适合处理视频、大日志文件或需要边下载边解析的场景。

TransformStream：在流中转换数据

TransformStream是Streams API的一部分，可以插入在可读流和可写流之间，对流动的数据进行实时处理，比如压缩、加密或编码转换。

示例：创建一个将文本转为大写的转换流：

const encoder = new TextEncoder();
const decoder = new TextDecoder();

const transformStream = new TransformStream({
  transform(chunk, controller) {
    const upperChunk = chunk.toUpperCase();
    controller.enqueue(encoder.encode(upperChunk));
  }
});

// 使用流处理文本
const inputStream = new ReadableStream({
  start(controller) {
    controller.enqueue('hello');
    controller.enqueue('world');
    controller.close();
  }
});

const readable = inputStream
  .pipeThrough(transformStream)
  .pipeThrough(new TextDecoderStream());

// 消费结果
const reader = readable.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  console.log(value); // 输出：HELLO WORLD
}

登录后复制

这种模式非常适合构建高效的文件处理流水线，例如边上传边压缩。

基本上就这些。Blob提供了基本的二进制数据封装能力，而Stream API则让大规模数据处理变得高效流畅。两者结合，使JavaScript在文件操作方面越来越接近原生应用体验。实际项目中，合理使用这些API能极大优化用户体验，尤其是面对大文件或弱网络环境时。不复杂但容易忽略的是资源释放和兼容性处理，记得及时revokeObjectURL并考虑降级方案。

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