blob 和file对象的区别

Blob 和 File 是 JavaScript 中处理二进制数据的两个接口，主要用于浏览器环境。它们的核心区别如下：

---

1. 定义与来源

• Blob (Binary Large Object)

  • 通用的二进制数据容器，可存储任意类型的数据（如文本、图像、音频等）。
  • 通过代码动态创建（如 new Blob(data, {type})），或从网络请求、数据库等获取。

• File

  • 继承自 Blob，是 Blob 的扩展，专门表示用户从文件系统选择的文件（如 <input type="file"> 上传的文件）。
  • 包含额外的文件元信息（如文件名、最后修改时间、MIME 类型等）。

---

2. 属性和方法

• Blob

  • 基础属性：
    • size：数据大小（字节）。
    • type：MIME 类型（如 image/png）。
  • 方法：
    • slice()：分割 Blob 生成新 Blob。
    • stream()：转换为 ReadableStream。

• File

  • 继承所有 Blob 的属性和方法。
  • 额外属性：
    • name：文件名（如 example.txt）。
    • lastModified：最后修改时间戳。
    • webkitRelativePath（非标准）：文件在目录中的相对路径（如通过 <input webkitdirectory> 上传）。

---

3. 使用场景

• Blob

  • 动态生成二进制数据（如通过 fetch() 下载的图片）。
  • 处理内存中的二进制数据（如裁剪视频片段）。
  • 转换为 Base64 或 Object URL（URL.createObjectURL(blob)）。

• File

  • 用户通过 <input type="file"> 选择的文件。
  • 需要上传文件时（如通过 FormData 发送到服务器）。
  • 需要访问文件名或修改时间等元信息时。

---

4. 示例

// 创建一个 Blob
const blob = new Blob("Hello, world!", { type: "text/plain" });
console.log(blob.size); // 13

// 从 <input> 获取 File
const fileInput = document.querySelector('inputtype="file"');
const file = fileInput.files0;
console.log(file.name); // 用户选择的文件名

// File 是 Blob 的子类
console.log(file instanceof Blob); // true

---

5. 关键区别总结
   特性 Blob File

来源 代码生成或网络请求 用户文件系统选择
元信息 仅 size 和 type 包含 name、lastModified 等
继承关系 父类 继承自 Blob
典型用途 内存二进制操作 文件上传、处理用户文件

---

何时选择？

• 需要处理用户上传的文件 → File（直接访问文件名等元数据）。
• 操作动态生成的二进制数据 → Blob。
• 两者均可通过 URL.createObjectURL() 生成临时链接或通过 FileReader 读取内容。

如果需要将 Blob 转换为 File，可通过 new File(blob, "filename", {options}) 实现。