当前位置：首页 > news >正文

一篇文章理解前端中的 File 和 Blob

news 2026/2/10 1:35:20

概述： js处理文件、二进制数据和数据转换的时候，提供了一些API和对象，例如：File、Blob、FileReader、ArraryBuffer、Base64、Object URL 和 DataURL。现在主要介绍File和Blob这两个对象。

1.Blob介绍

在js中，Blob（Binary Large Object）对象用于表示不可变的原始二进制数据，主要用于存储文件、图片、视频和音频等各种类型数据。 Blob提供一种高效方式操作数据文件，不需要将数据都加载到内存中，有利于处理二进制数据或大型文件。

可以使用 new Blob() 构造函数创建一个 Blob 对象：

const blob = new Blob(blobParts, options);

blobParts: 是一个包含将被放入 Blob 对象中的数据的数组，可以是字符串、数组缓冲区（ArrayBuffer）、TypedArray、Blob 对象等。
options: 一个可选的对象，可以设置 type（MIME 类型）和 endings（用于表示换行符）。

例如：

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

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

size: 返回 Blob 对象的大小（以字节为单位）。
type: 返回 Blob 对象的 MIME 类型。

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

例如：slice([start], [end], [contentType])、text()、arrayBuffer() 和 stream()。

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

该方法用于从 Blob 中截取一部分数据并返回一个新的 Blob 对象。

参数 start 和 end 表示提取的字节范围，contentType 设置提取部分的 MIME 类型。
```
const blob = new Blob(["Hello, world!"], { type: "text/plain" });
const partialBlob_1 = blob.slice(0, 5, );
const partialBlob_2 = blob.slice(0, 5, "text/plain");
```

text()

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

const blob = new Blob(["Hello, world!"], { type: "text/plain" });
blob.text().then((text) => {console.log(text); // 输出 "Hello, world!"
});

arrayBuffer()
该方法将 Blob 的内容读取为 ArrayBuffer 对象，适合处理二进制数据。
它返回一个 Promise，解析为 ArrayBuffer 数据。
```
const blob = new Blob(["Hello, world!"], { type: "text/plain" });
blob.arrayBuffer().then((buffer) => {console.log(buffer);
});
```
stream()

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

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

Blob的应用场景

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

生成文件下载

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

const blob = new Blob(["test文件内容"], { 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 对象

运行代码后会在浏览器中下载一个test.txt的文件

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

const formData = new FormData();
formData.append("file", blob, "example.txt"); //formData.append(name, blob, fileName)

fetch("/upload", {method: "POST",body: formData,
}).then((response) => {console.log("文件成功上传了");
});

读取图片或其他文件
通过 FileReader API 可以将 Blob 对象读取为不同的数据格式。例如可以将 Blob 读取为图片文件格式。

<!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];// startsWith() 方法用于检测字符串是否以指定的子字符串开始。判断是否上传的文件是图片类型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);};//获取API异步读取的文件数据，另存为数据URLreader.readAsDataURL(file);} else {alert("请选择一个有效的图片文件。");}});</script></body>
</html>

Blob 和 Base64

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

const reader = new FileReader();
reader.onloadend = function () {const base64data = reader.result;console.log(base64data); // 输出 base64 编码的数据
};
reader.readAsDataURL(blob); // 将blob读取为dataurl

2.File介绍

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

<!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="myFileInput" /><script>document.getElementById("myFileInput").addEventListener("change", (event) => {const file = event.target.files[0];console.log("file-->:", file);console.log("文件名:", file.name);console.log("文件类型:", file.type);console.log("文件大小:", file.size);});</script></body>
</html>

也可以使用 File 的方式获取用户上传的文件，手动创建 File 对象：

// new File(文件内容,文件名,文件格式)
const file = new File(["Hello, world!"], "hello-world.txt", {type: "text/plain",
});

console.log(file);

File 对象继承了 Blob 对象的方法，因此可以使用一些 Blob 对象的方法来。

file.slice()

// 获取文件的前 10 个字节
const blob = file.slice(0, 10);

file.text()

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

file.arrayBuffer()

file.arrayBuffer().then((buffer) => {// 输出文件的 ArrayBufferconsole.log(buffer); 
});

file.stream()
```
const stream = file.stream();
```

3.总结

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

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

File 对象也就是带有文件信息的 Blob。

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

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

一篇文章理解前端中的 File 和 Blob

1.Blob介绍

2.File介绍

3.总结

相关文章：

一篇文章理解前端中的 File 和 Blob

串口屏控制的自动滑轨（未完工）

DFA算法实现敏感词过滤

Python自动化运维：技能掌握与快速入门指南

在linux系统中安装pygtftk软件

decodeURIComponentSafe转义%问题记录URI malformed

自由学习记录（18）

vue3-ref 和 reactive

Apache Calcite - 查询优化之自定义优化规则

大型语言模型（LLM）的小型化研究进展

MiniWord

Netty 常见组件介绍

高频电子线路---倍频器与振荡器

删除 git submodule

el-table 多选默认选中（根据返回的id给数据加默认选中状态）

境外网站翻译之自由职业

批量图片转PDF文件的多种方法详解

Web服务器（理论）

js:()=＞(,)；()的作用：明确表达式的边界。

RSI 5G通信技术中用于标识小区的特定参数

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

css实现圆环展示百分比，根据值动态展示所占比例

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

高频面试之3Zookeeper

苍穹外卖--缓存菜品

Maven 概述、安装、配置、仓库、私服详解

OPENCV形态学基础之二腐蚀

PAN/FPN

IP如何挑？2025年海外专线IP如何购买？

基于Java+VUE+MariaDB实现（Web）仿小米商城