概述: 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异步读取的文件数据,另存为数据URL reader.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) => { // 输出文件的 ArrayBuffer console.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