HUA

JavaScript 在处理文件、二进制数据和数据转换时，提供了一系列的 API 和对象，比如 File、Blob、FileReader、ArrayBuffer、Base64、Object URL 和 DataURL。每个概念在不同场景中都有重要作用。下面的内容我们将会详细学习每个概念及其在实际应用中的用法。

接下来的内容中我们将来了解 File和 Blob 这两个对象。

blob

在 JavaScript 中，Blob（Binary Large Object）对象用于表示不可变的、原始的二进制数据。它可以用来存储文件、图片、音频、视频、甚至是纯文本等各种类型的数据。Blob 提供了一种高效的方式来操作数据文件，而不需要将数据全部加载到内存中，这在处理大型文件或二进制数据时非常有用。

我们可以使用 new Blob() 构造函数来创建一个 Blob 对象，语法如下：

 1const blob = new Blob(blobParts, options);

  1. blobParts: 一个数组，包含将被放入 Blob 对象中的数据，可以是字符串、数组缓冲区（ArrayBuffer）、TypedArray、Blob 对象等。

  2. options: 一个可选的对象，可以设置 type（MIME 类型）和 endings（用于表示换行符）。

例如：

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

Blob 对象主要有以下几个属性：

  1. size: 返回 Blob 对象的大小（以字节为单位）。
 1console.log(blob.size);
  1. type: 返回 Blob 对象的 MIME 类型。
 1console.log(blob.type);

Blob 对象提供了一些常用的方法来操作二进制数据。

  1. slice([start], [end], [contentType])

该方法用于从 Blob 中提取一部分数据，并返回一个新的 Blob 对象。参数 start 和 end 表示提取的字节范围，contentType 设置提取部分的 MIME 类型。

 1const blob = new Blob(["Hello, world!"], { type: "text/plain" });
 2
 3const partialBlob = blob.slice(0, 5);
  1. text()

该方法将 Blob 的内容读取为文本字符串。它返回一个 Promise，解析为文本数据。

 1blob.text().then((text) => {
 2  console.log(text); 
 3});

  1. arrayBuffer()

该方法将 Blob 的内容读取为 ArrayBuffer 对象，适合处理二进制数据。它返回一个 Promise，解析为 ArrayBuffer 数据。

 1const blob = new Blob(["Hello, world!"], { type: "text/plain" });
 2
 3blob.arrayBuffer().then((buffer) => {
 4  console.log(buffer);
 5});

  1. stream()

该方法将 Blob 的数据作为一个 ReadableStream 返回，允许你以流的方式处理数据，适合处理大文件。

 1const stream = blob.stream();

Blob 的使用场景

Blob 对象在很多场景中非常有用，尤其是在 Web 应用中处理文件、图片或视频等二进制数据时。以下是一些常见的使用场景：

  1. 生成文件下载

你可以通过 Blob 创建文件并生成下载链接供用户下载文件。

 1const blob = new Blob(["This is a test file."], { type: "text/plain" });
 2const url = URL.createObjectURL(blob); 
 3const a = document.createElement("a");
 4a.href = url;
 5a.download = "test.txt";
 6a.click();
 7URL.revokeObjectURL(url);

当我们刷新浏览器的时候发现是可以自动给我们下载图片了：

  1. 上传文件

你可以通过 FormData 对象将 Blob 作为文件上传到服务器：

 1const formData = new FormData();
 2formData.append("file", blob, "example.txt");
 3
 4fetch("/upload", {
 5  method: "POST",
 6  body: formData,
 7}).then((response) => {
 8  console.log("File uploaded successfully");
 9});
  1. 读取图片或其他文件

通过 FileReader API 可以将 Blob 对象读取为不同的数据格式。举例来说，你可以将 Blob 读取为图片并显示在页面上：

 1<!DOCTYPE html>
 2<html lang="en">
 3  <head>
 4    <meta charset="UTF-8" />
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6    <title>Document</title>
 7  </head>
 8  <body>
 9    <input type="file" id="fileInput" accept="image/*" />
10
11    <div id="imageContainer"></div>
12    <script>
13      const fileInput = document.getElementById("fileInput");
14
15      const imageContainer = document.getElementById("imageContainer");
16
17      fileInput.addEventListener("change", function (event) {
18        const file = event.target.files[0];
19
20        if (file && file.type.startsWith("image/")) {
21          const reader = new FileReader();
22
23          reader.onload = function (e) {
24            const img = document.createElement("img");
25            img.src = e.target.result;
26            img.style.maxWidth = "500px";
27            img.style.margin = "10px";
28            imageContainer.innerHTML = "";
29            imageContainer.appendChild(img);
30          };
31
32          reader.readAsDataURL(file);
33        } else {
34          alert("请选择一个有效的图片文件。");
35        }
36      });
37    </script>
38  </body>
39</html>

  1. Blob 和 Base64

有时你可能需要将 Blob 转换为 Base64 编码的数据（例如用于图像的内联显示或传输）。可以通过 FileReader 来实现：

 1const reader = new FileReader();
 2reader.onloadend = function () {
 3  const base64data = reader.result;
 4  console.log(base64data); 
 5};
 6
 7reader.readAsDataURL(blob);

File

File 是 JavaScript 中代表文件的数据结构，它继承自 Blob 对象，包含文件的元数据（如文件名、文件大小、类型等）。File 对象通常由用户通过 <input type="file"> 选择文件时创建，也可以使用 JavaScript 构造函数手动创建。

 1<input type="file" id="fileInput" />
 2<script>
 3  document.getElementById("fileInput").addEventListener("change", (event) => {
 4    const file = event.target.files[0];
 5    console.log("文件名:", file.name);
 6    console.log("文件类型:", file.type);
 7    console.log("文件大小:", file.size);
 8  });
 9</script>

最终输出结果如下图所示：

我们可以使用 File 的方式来访问用户上传的文件，我们也可以手动创建 File 对象：

 1const file = new File(["Hello, world!"], "hello-world.txt", {
 2  type: "text/plain",
 3});
 4
 5console.log(file);

File 对象继承了 Blob 对象的方法，因此可以使用一些 Blob 对象的方法来处理文件数据。

  1. slice(): 从文件中获取一个子部分数据，返回一个新的 Blob 对象。
 1const blob = file.slice(0, 1024);
  1. text(): 读取文件内容，并将其作为文本返回（这是 Blob 的方法，但可以用于 File 对象）。
 1file.text().then((text) => {
 2  console.log(text); 
 3});
  1. arrayBuffer(): 将文件内容读取为 ArrayBuffer（用于处理二进制数据）。
 1file.arrayBuffer().then((buffer) => {
 2  console.log(buffer); 
 3});
  1. stream(): 返回一个 ReadableStream 对象，可以通过流式读取文件内容。
 1const stream = file.stream();

总结

Blob 是纯粹的二进制数据，它可以存储任何类型的数据，但不具有文件的元数据（如文件名、最后修改时间等）。

File 是 Blob 的子类，File 对象除了具有 Blob 的所有属性和方法之外，还包含文件的元数据，如文件名和修改日期。

你可以将 File 对象看作是带有文件信息的 Blob。

 1const file = new File(["Hello, world!"], "hello.txt", { type: "text/plain" });
 2
 3console.log(file instanceof Blob);

二者在文件上传和二进制数据处理的场景中被广泛使用。Blob 更加通用，而 File 更专注于与文件系统的交互。

最后分享两个我的两个开源项目,它们分别是:

这两个项目都会一直维护的，如果你想参与或者交流学习，可以加我微信 yunmz777 如果你也喜欢,欢迎 star 🚗🚗🚗

文章推荐 自从用了 GPT4o，原来要 20 分钟写完的组件，我 5 分钟就能写完成了

个人笔记记录 2021 ~ 2025