深入理解 JavaScript 中的二进制数据操作：ArrayBuffer、Blob、FileReader、ObjectURL

ShareJasmine
301 阅读3分钟

在 Web 前端开发中，处理二进制数据是一个非常重要的话题。无论是文件上传下载、WebSocket 的二进制通信，还是图片、音视频等富媒体的处理，了解 JavaScript 提供的原始数据结构都必不可少。本文将系统梳理以下几个核心对象：

  • ArrayBuffer
  • Blob
  • File
  • FileReader
  • ObjectURL

并结合示例说明它们的用途与差异

在这里插入图片描述

一、核心概念对比

名称含义作用是否可读写常见用途
ArrayBuffer表示原始二进制数据的一种方式，是一个固定长度的内存块本身不提供直接操作，需要通过视图（如 TypedArray、DataView）来读写内容✅（在数据视图下）WebSocket 二进制通信、文件流读取、图片、音视频的解码等
TypedArray建立在 ArrayBuffer 之上的数据视图提供特定数据类型的读写操作✅以特定格式读写 ArrayBuffer（如 Int8Array、Float32Array）
BlobBinary Large Object，表示不可变的原始二进制数据对象可存储二进制、文本、图片等多种数据❌文件上传、生成下载链接、处理图片资源
FileBlob 的子类，表示用户在文件系统中选择的文件在 Blob 基础上增加 name、lastModified 等元数据属性❌表单文件上传、拖拽文件、显示文件元数据

二、ArrayBuffer

1. 定义

ArrayBuffer 是用来表示通用的原始二进制数据缓冲区，本质是一个字节数组。

2. 创建方式

const buffer = new ArrayBuffer(16); // 创建一个16字节的缓冲区

注意：创建后长度固定，不可调整。

3. 操作方式

ArrayBuffer 本身不能直接读写，需要借助数据视图：

  • TypedArray 视图（ 如 Uint8Array、Float32Array）

  • DataView 视图（更灵活，支持任意偏移和字节长度）

三、Blob

1. 定义

Blob 全称 Binary Large Object，表示一个不可变的原始数据块，支持文本和二进制数据。

2. 创建方式

const blob = new Blob(
  ["Hello World"],
  { type: "text/plain" }
);

3. 切片操作

const slicedBlob = blob.slice(0, 5, "text/plain");

4. 读取 Blob

因为 Blob 是不可变的，需要 FileReader 来读取其内容。

四、File

1. 定义

File 对象继承自 Blob，额外包含：文件名 name ，最后修改时间 lastModified ，可以理解为：带有元数据的 Blob

2. 创建方式

const file = new File(
  ["Hello World"],
  "example.txt",
  { type: "text/plain" }
);

3. 获取方式

一般通过用户上传的文件获取

示例：

const input = document.getElementById("input");
input.onchange = (event) => {
  const files = event.target.files;
  console.log("Files:", files); // FileList
};

五、FileReader

FileReader 是一个用于异步读取 Blob 或 File 内容的接口

1. 常用实例方法

方法说明
readAsArrayBuffer()读取为 ArrayBuffer，适合二进制
readAsText()读取为字符串
readAsDataURL()读取为 Base64 编码

2. 常用属性

readyState: 当前读取状态

result: 读取完成后的数据（异步获取）

3. 示例：读取 Blob 并输出文本

function demo() {
  let blob = new Blob(["Hello World!"], { type: "text/plain" });
  blob = blob.slice(0, 5, "text/plain");

  const fileReader = new FileReader();
  fileReader.readAsText(blob);
  fileReader.onload = function() {
    console.log(fileReader.result); // 输出 Hello
  };
}

demo();

六、ObjectURL

ObjectURL 用于为Blob 或 File 对象生成一个临时 URL，可直接在 <img>、<a> 标签中使用。

示例：文件选择并预览

const input = document.getElementById("input");
const image = document.getElementById("image");

input.onchange = (event) => {
  const file = event.target.files[0];
  const url = URL.createObjectURL(file);
  image.src = url;
};

七、典型应用场景

功能推荐 API
文件上传<input type="file"> + Blob/File
图片预览ObjectURL + <img>
富文本或音视频二进制处理ArrayBuffer + TypedArray
文件内容读取（文本或 Base64）FileReader
WebSocket 二进制通信ArrayBuffer
大文件切片上传Blob.slice()

八、总结

  • ArrayBuffer 是底层内存块，主要负责数据的存储。
  • TypedArray 或 DataView 提供对 ArrayBuffer 的操作视图。
  • Blob 是一种高层次、不可变的数据封装，适合存储和传输。
  • File 在 Blob 基础上添加了文件元数据。
  • FileReader 用于异步读取 Blob/File 内容。
  • ObjectURL 提供了方便的 URL 引用方式，便于资源预览和下载。
avatar
文章
阅读
粉丝