File 和 Blob 的区别
在前端开发中，File 和 Blob 是两个经常使用的对象，特别是在处理文件上传、下载、二进制数据等场景中。两者之间存在一些相似之处，但也有显著的区别。本文将详细解析这两个对象的不同点及其各自的应用场景。
1. Blob 对象
定义
Blob（Binary Large Object）是 JavaScript 中用于表示不可变的原始二进制数据的对象，可以存储文件、图片、音频、视频或纯文本等各种数据类型。Blob 提供了一种高效的方式来处理数据，而无需将其完全加载到内存中，尤其适合处理大文件。
创建方式
通过 new Blob() 构造函数可以创建一个 Blob 对象，语法如下：
const blob = new Blob(blobParts, options);
blobParts: 一个数组，可以包含字符串、ArrayBuffer、TypedArray、Blob等类型的数据。options: 可选项，包含type（MIME 类型）和endings（换行符）。
例如：
const blob = new Blob(["Hello, world!"], { type: "text/plain" });
Blob 的属性和方法
size: 返回
Blob对象的大小（以字节为单位）。console.log(blob.size); // 输出 Blob 的大小type: 返回
Blob对象的 MIME 类型。console.log(blob.type); // 输出 Blob 的 MIME 类型
常用方法
slice([start], [end], [contentType]): 从
Blob中提取一部分数据，返回一个新的Blob对象。const partialBlob = blob.slice(0, 5);text(): 将
Blob的内容读取为文本字符串，返回一个Promise，解析为文本数据。blob.text().then(text => console.log(text)); // 输出 "Hello, world!"arrayBuffer(): 将
Blob的内容读取为ArrayBuffer，适合处理二进制数据，返回一个Promise。blob.arrayBuffer().then(buffer => console.log(buffer));stream(): 返回
Blob数据的ReadableStream，用于流式处理大文件。const stream = blob.stream();
使用场景
生成文件下载: 通过
Blob创建文件并生成下载链接供用户下载。const blob = new Blob(["This is a test file."], { type: "text/plain" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "test.txt"; a.click(); URL.revokeObjectURL(url);上传文件: 通过
FormData将Blob对象作为文件上传到服务器。const formData = new FormData(); formData.append("file", blob, "example.txt"); fetch("/upload", { method: "POST", body: formData, }).then(response => console.log("File uploaded successfully"));读取图片或其他文件: 通过
FileReader将Blob读取为图片并显示。const reader = new FileReader(); reader.onload = function(e) { const img = document.createElement("img"); img.src = e.target.result; document.body.appendChild(img); }; reader.readAsDataURL(blob);
2. File 对象
定义
File 是 JavaScript 中代表文件的数据结构，它继承自 Blob，并包含了文件的元数据（如文件名、类型、大小、最后修改时间等）。File 对象通常由用户通过 <input type="file"> 元素选择文件时创建，但也可以通过 JavaScript 手动创建。
创建方式
用户通过文件选择创建 File 对象：
<input type="file" id="fileInput" />
<script>
document.getElementById("fileInput").addEventListener("change", (event) => {
const file = event.target.files[0];
console.log("文件名:", file.name);
console.log("文件类型:", file.type);
console.log("文件大小:", file.size);
});
</script>
手动创建 File 对象：
const file = new File(["Hello, world!"], "hello-world.txt", { type: "text/plain" });
console.log(file);
File 的属性和方法
File 继承了 Blob 的所有属性和方法，因此它具有所有 Blob 的功能。此外，File 还具有以下属性：
- name: 文件名。
- lastModified: 文件的最后修改时间（以毫秒为单位）。
例如：
console.log(file.name); // 输出文件名
console.log(file.lastModified); // 输出最后修改时间
常用方法
slice(): 从文件中获取一部分数据，返回一个新的
Blob对象。const blob = file.slice(0, 1024); // 获取文件的前 1024 个字节text(): 读取文件内容，作为文本返回。
file.text().then(text => console.log(text));arrayBuffer(): 将文件内容读取为
ArrayBuffer。file.arrayBuffer().then(buffer => console.log(buffer));stream(): 返回
ReadableStream，可用于流式处理文件数据。const stream = file.stream();
3. 总结
- Blob 是纯粹的二进制数据，适用于处理各种类型的二进制数据，但不包含文件元数据。
- File 继承自
Blob，并包含了文件的元数据（文件名、最后修改时间等）。File对象更专注于与文件系统的交互。
可以将 File 看作是包含文件信息的 Blob。两者在处理二进制数据时经常结合使用，Blob 通常用于通用的数据处理，而 File 适用于文件上传等操作。
const file = new File(["Hello, world!"], "hello.txt", { type: "text/plain" });
console.log(file instanceof Blob); // true