JavaScript文件操作详解：File、Blob、FileReader、ArrayBuffer、Base64

2024-01-17 08:40:42

在实际的JavaScript开发中，我们经常需要处理各种类型的数据，其中文件操作也是一种非常常见的功能。JavaScript提供了一些API来处理文件或原始文件数据，例如：File、Blob、FileReader、ArrayBuffer、Base64等。

下面就让我们来深入了解一下这些API是如何使用的，它们之间又有什么联系和区别。

File

File对象表示一个本地文件，它包含了文件的基本信息，例如文件名、文件大小、文件类型等。我们可以通过<input type="file">标签或者File构造函数来创建File对象。

// 通过 <input type="file"> 标签创建 File 对象
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (event) => {
  const files = event.target.files;
  // files 是一个 FileList 对象，其中包含了所有选择的文件
});

// 通过 File 构造函数创建 File 对象
const file = new File(['Hello, world!'], 'hello.txt', {
  type: 'text/plain',
});

Blob

Blob对象表示一个不可变、原始的字节流，它可以是文件的一部分或整个文件。我们可以通过Blob构造函数来创建Blob对象，也可以通过File对象或者ArrayBuffer对象来创建Blob对象。

// 通过 Blob 构造函数创建 Blob 对象
const blob = new Blob(['Hello, world!'], {
  type: 'text/plain',
});

// 通过 File 对象创建 Blob 对象
const file = new File(['Hello, world!'], 'hello.txt');
const blob = new Blob([file]);

// 通过 ArrayBuffer 对象创建 Blob 对象
const arrayBuffer = new ArrayBuffer(1024);
const blob = new Blob([arrayBuffer]);

FileReader

FileReader对象允许我们以异步的方式读取文件或Blob对象的内容。我们可以使用FileReader对象中的readAsText()、readAsArrayBuffer()、readAsDataURL()等方法来读取文件或Blob对象的内容。

// 创建 FileReader 对象
const reader = new FileReader();

// 读取文件或 Blob 对象
reader.readAsText(file); // 读取为文本
reader.readAsArrayBuffer(file); // 读取为 ArrayBuffer
reader.readAsDataURL(file); // 读取为 DataURL

// 监听 onload 事件，获取读取结果
reader.onload = (event) => {
  const result = event.target.result;
  // result 是读取到的内容
};

ArrayBuffer

ArrayBuffer对象表示一个固定长度、只读的、二进制数据的缓冲区。我们可以通过ArrayBuffer构造函数来创建ArrayBuffer对象。

// 创建 ArrayBuffer 对象
const arrayBuffer = new ArrayBuffer(1024);

Base64

Base64是一种将二进制数据编码为ASCII字符的编码方式。我们可以使用btoa()和atob()函数来进行Base64编码和解码。

// Base64 编码
const base64String = btoa('Hello, world!');

// Base64 解码
const decodedString = atob(base64String);

联系和区别

File、Blob、FileReader、ArrayBuffer、Base64这几个API之间有着密切的联系和区别。

File对象表示本地文件，Blob对象表示原始字节流，FileReader对象允许我们读取文件或Blob对象的内容，ArrayBuffer对象表示二进制数据的缓冲区，Base64是一种编码方式。
File对象可以通过<input type="file">标签或者File构造函数创建，Blob对象可以通过Blob构造函数、File对象或者ArrayBuffer对象创建，FileReader对象可以通过FileReader构造函数创建，ArrayBuffer对象可以通过ArrayBuffer构造函数创建，Base64编码可以通过btoa()函数进行，Base64解码可以通过atob()函数进行。
File对象和Blob对象都是原始数据的表示，但File对象是不可变的，而Blob对象是可变的。FileReader对象允许我们以异步的方式读取文件或Blob对象的内容，ArrayBuffer对象表示一个固定长度、只读的、二进制数据的缓冲区，Base64是一种将二进制数据编码为ASCII字符的编码方式。