前端 File 和 Blob两个对象之间的区别

Blob 用于表示不可变的二进制数据,可通过构造函数创建,有 size、type 等属性和多种操作方法,适用多种场景。File 继承自 Blob,包含文件元数据。二者在文件上传和二进制数据处理中广泛使用,Blob 更通用,

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

Blob

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

ini 复制代码
const blob = new Blob(blobParts, options);
  1. blobParts: 一个数组,包含将被放入 Blob 对象中的数据,可以是字符串、数组缓冲区(ArrayBuffer)、TypedArray、Blob 对象等。

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

例如:

go 复制代码
const blob = new Blob(["Hello, world!"], { type: "text/plain" });

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

  1. size: 返回 Blob 对象的大小(以字节为单位)。
  2. type: 返回 Blob 对象的 MIME 类型。

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

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

    ini 复制代码
    const blob = new Blob(["Hello, world!"], { type: "text/plain" });
    const partialBlob = blob.slice(0, 5);

2..text() 该方法将 Blob 的内容读取为文本字符串。它返回一个 Promise,解析为文本数据。

arduino 复制代码
blob.text().then((text) => {
  console.log(text); // 输出 "Hello, world!"
});

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

arduino 复制代码
const blob = new Blob(["Hello, world!"], { type: "text/plain" });

blob.arrayBuffer().then((buffer) => {
  console.log(buffer);
});

Blob 的使用场景

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

  1. 生成文件下载

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

ini 复制代码
const blob = new Blob(["This is a test file."], { type: "text/plain" });
const url = URL.createObjectURL(blob); // 创建一个 Blob URL
const a = document.createElement("a");
a.href = url;
a.download = "test.txt";
a.click();
URL.revokeObjectURL(url); // 释放 URL 对象

2、上传文件

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

javascript 复制代码
const formData = new FormData();
formData.append("file", blob, "example.txt");

fetch("/upload", {
  method: "POST",
  body: formData,
}).then((response) => {
  console.log("File uploaded successfully");
});

3、读取图片或其他文件,本地预览图片

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

xml 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" id="fileInput" accept="image/*" />

    <div id="imageContainer"></div>
    <script>
      const fileInput = document.getElementById("fileInput");

      const imageContainer = document.getElementById("imageContainer");

      fileInput.addEventListener("change", function (event) {
        const file = event.target.files[0];

        if (file && file.type.startsWith("image/")) {
          const reader = new FileReader();

          reader.onload = function (e) {
            const img = document.createElement("img");
            img.src = e.target.result;
            img.style.maxWidth = "500px";
            img.style.margin = "10px";
            imageContainer.innerHTML = "";
            imageContainer.appendChild(img);
          };

          reader.readAsDataURL(file);
        } else {
          alert("请选择一个有效的图片文件。");
        }
      });
    </script>
  </body>
</html>

4、Blob 和 Base64

ini 复制代码
const reader = new FileReader();
reader.onloadend = function () {
  const base64data = reader.result;
  console.log(base64data); // 输出 base64 编码的数据
};

reader.readAsDataURL(blob); // 将 Blob 文件读取为 Base64 编码的 Data URL

File

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

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

  1. slice(): 从文件中获取一个子部分数据,返回一个新的 Blob 对象。

    ini 复制代码
    const blob = file.slice(0, 1024); // 获取文件的前 1024 个字节
  2. text(): 读取文件内容,并将其作为文本返回(这是 Blob 的方法,但可以用于 File 对象)。

    file.text().then((text) => { console.log(text); // 输出文件的文本内容 })

3.、arrayBuffer(): 将文件内容读取为 ArrayBuffer(用于处理二进制数据)。

arduino 复制代码
file.arrayBuffer().then((buffer) => {
  console.log(buffer); // 输出文件的 ArrayBuffer
});

4、stream(): 返回一个 ReadableStream 对象,可以通过流式读取文件内容。

ini 复制代码
const stream = file.stream();

总结

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

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

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

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

相关推荐
大莲芒25 分钟前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react17
前端·react.js·前端框架
木木黄木木2 小时前
html5炫酷3D文字效果项目开发实践
前端·3d·html5
Li_Ning213 小时前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
胡八一4 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla4 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡4 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu4 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c4 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪4 小时前
几种比较实用的指令举例
前端·javascript·面试
麻芝汤圆4 小时前
MapReduce 的广泛应用:从数据处理到智能决策
java·开发语言·前端·hadoop·后端·servlet·mapreduce