type
status
date
slug
summary
tags
category
icon
password
在前端开发中，
File 和 Blob 是处理二进制数据的核心对象。每天我们都在不知不觉中使用它们：- 用户上传图片时，
<input type="file">返回的是 File
- Canvas 生成截图时，
toBlob()返回的是 Blob
- 大文件分片上传时，底层依赖的是它们的切片能力
但若被问及二者的本质区别，很多开发者却难以准确回答。本文将用最直观的技术视角解析二者的差异。
一、核心概念
1. Blob（Binary Large Object）
定义：二进制数据的基础容器，表示不可修改的原始数据块。
核心特性：
- 纯数据载体：不包含任何元数据
- 类型标记：通过 MIME type 声明数据类型
- 不可变性：创建后无法直接修改内容
- 分片能力：支持
slice()方法切割数据
2. File
定义：继承自 Blob 的扩展对象，用于表示文件系统中的文件。
核心扩展：
- 完整的文件元数据：
name：文件名（含扩展名）lastModified：最后修改时间戳size：文件大小（继承自 Blob）type：MIME 类型（继承自 Blob）
- 用户文件关联：通常来自用户设备或系统接口
二、关键差异对比
维度 | Blob | File |
继承关系 | 基类 | 继承自 Blob |
数据来源 | 内存创建或 API 生成 | 用户操作或系统接口 |
元数据 | 仅有 size 和 type | 包含 name、lastModified 等完整信息 |
文件系统关联 | 无 | 通常关联物理文件 |
典型应用场景 | 内存数据操作、网络传输 | 文件上传/下载、表单处理 |
三、应用场景
场景1：大文件分片上传
技术要点：
- 使用
File.slice()进行分片（底层调用 Blob 的分片能力）
- 保持文件名一致性便于服务端重组
场景2：Canvas 截图处理
技术要点：
- Canvas 原生返回 Blob（无文件名信息）
- 需手动包装为 File 进行文件级操作
场景3：动态文件下载
技术要点：
- 使用 Blob 处理内存数据
- 通过
download属性指定下载文件名
四、互操作与转换
1. File → Blob
2. Blob → File
五、技术选型
优先使用 File：
- 处理用户选择的物理文件
- 需要文件名、修改时间等元数据
- 与
<input type="file">或 FormData 直接交互
优先使用 Blob：
- 操作内存中的二进制数据
- 需要分片、流式处理等底层操作
- 与 WebSocket、IndexedDB 等 API 交互
- Author:Lens
- URL:http://preview.tangly1024.com/article/1bd26a24-3820-8072-8879-edea267437b6
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
