登录
别再只用 base64！HTML5 的 Blob 才是二进制处理的王者，面试常考
前端开发中，90%的人都不知道：掌握Blob对象处理二进制数据的能力，是突破技术瓶颈的关键！
你是不是还在只用 base64 处理图片？面试官问 “如何高效处理大文件上传” 时一脸懵？其实 HTML5 的 Blob 对象才是二进制处理的 “隐藏王者”—— 它能轻松搞定图片预览、大文件分片、PDF 生成等高级操作，也是前端面试的高频考点。
从一个面试题说起：为什么 base64 不适合大图片？🤦♀️
先看一个场景：前端需要预览用户上传的图片。很多人第一反应是转成 base64：
// 传统方式：图片转base64
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
img.src = reader.result; // 类似 "data:image/png;base64,/9j/4AAQSkZJRg..."
};
但面试官追问：“如果用户上传 10MB 的图片，用 base64 有什么问题？”
答案藏在 base64 的原理里：base64 是把二进制数据转成字符串，会让数据体积增加 30% 。10MB 的图片转成 base64 后变成 13MB，不仅浪费带宽，还会让 JS 处理变慢（字符串操作比二进制操作低效）。
这时候，Blob 对象就要登场了 —— 它能直接操作二进制数据，处理大文件更高效，也是前端处理二进制的 “标准答案”。
Blob 是什么？二进制世界的 “万能容器”😍
Blob 的全称是Binary Large Object（二进制大对象） ，你可以把它理解成一个 “装二进制数据的文件袋”：
- 里面可以装图片、视频、PDF 等任何二进制数据；
- 有明确的 “文件类型”（比如
image/png）； - 支持切割、合并等操作，像 “拆快递盒” 一样灵活处理二进制。
对比 base64 和 Blob 的核心区别：
| 特性 | base64 | Blob |
|---|---|---|
| 本质 | 字符串（二进制的文本编码） | 二进制数据对象 |
| 体积 | 比原文件大 30% | 和原文件体积相同 |
| 操作效率 | 低（字符串处理慢） | 高（直接操作二进制） |
| 适用场景 | 小图标、简单数据 | 大文件、复杂二进制处理 |
简单说：小数据用 base64 方便，大数据用 Blob 高效。
实战：Base64图片转Blob全流程🤔
我们用一个 “图片处理” 案例，手把手教你用 Blob：把 base64 格式的图片转成 Blob 对象，再显示到页面上（这是面试常考的转换逻辑）
步骤 1：准备一个 base64 图片（模拟后端返回或本地存储的图片）
假设我们有一张 PNG 图片的 base64 编码（很长，这里简化表示）：
const base64Str = "data:image/png;base64,UklGRiAHAABXRUJQVlA4IBQHAACwHACdASpQAFAAP...";
步骤 2：从 base64 中提取纯二进制字符串
base64 编码的格式是data:类型;base64,实际编码，第一步要去掉前缀，只保留后面的二进制编码部分：
// 去掉base64前缀（"data:image/png;base64,"）
const pureBase64 = base64Str.split(",")[1]; // 结果："UklGRiAHAABXRUJQVlA4IBQHAACwHACd..."
步骤 3：用 atob () 解码 base64，得到二进制字符串
atob()是浏览器内置的解码函数，能把 base64 字符串转成二进制字符串（注意：这里的 “字符串” 是每个字符对应一个字节的二进制数据）：
// 解码base64，得到二进制字符串
const binaryStr = atob(pureBase64);
打印出来将会是这样
步骤 4：把二进制字符串转成 Uint8Array（二进制数组）
二进制字符串不方便直接操作，需要转成TypedArray（类型化数组） —— 这里用Uint8Array（8 位无符号整数数组），每个元素代表一个字节的二进制数据：
// 创建一个和二进制字符串长度相同的Uint8Array
const uint8Array = new Uint8Array(binaryStr.length);
// 逐个字符转成对应的二进制数值（0-255）
for (let i = 0; i < binaryStr.length; i++) {
uint8Array[i] = binaryStr.charCodeAt(i);
}
步骤 5：用 Uint8Array 创建 Blob 对象
有了二进制数组，就能创建 Blob 了，指定正确的 MIME 类型（比如image/png）：
// 创建Blob对象（二进制数据+类型）
const blob = new Blob([uint8Array], { type: "image/png" });
步骤 6：用 URL.createObjectURL () 生成 Blob 的访问地址
Blob 对象不能直接当src用，需要通过URL.createObjectURL()生成一个临时 URL（类似blob:http://localhost/xxx），浏览器能直接识别这个 URL：
// 生成Blob的临时URL
const blobUrl = URL.createObjectURL(blob);
// 显示图片（和用base64的方式一样简单，但更高效）
const img = document.getElementById("myImage");
img.src = blobUrl;
// 注意：用完后要释放URL，避免内存泄漏
img.onload = () => {
URL.revokeObjectURL(blobUrl);
};
运行代码后，图片正常显示，但背后用的是 Blob 而非 base64—— 处理大图片时，你会明显感觉到加载更快、页面更流畅。
面试必背：Blob 的核心 API 和注意事项
1. 核心 API
-
new Blob(blobParts, options)：创建 Blob 对象，blobParts是二进制数据数组（如[uint8Array, "字符串", anotherBlob]），options指定type（MIME 类型）； -
URL.createObjectURL(blob)：生成 Blob 的临时 URL； -
URL.revokeObjectURL(url)：释放临时 URL，避免内存泄漏； -
blob.slice(start, end, contentType)：切割 Blob，返回新的 Blob（类似字符串的slice）。
2. 注意事项
-
内存管理：
URL.createObjectURL()会占用内存，不用时必须用revokeObjectURL释放； - 兼容性：Blob 是 HTML5 标准 API，所有现代浏览器都支持（IE10+），不用担心兼容性问题；
-
与 File 的关系：
File对象是Blob的子类，所以File能使用所有 Blob 的方法（比如slice）—— 这也是为什么我们能直接切割用户上传的File对象。
最后建议：Blob作为HTML5的底层能力，单独使用不足以成为亮点。但当你能结合文件处理、性能优化、音视频等场景展示其价值时，它将成为你技术深度的完美证明。记住：
"掌握Blob，就掌握了现代Web应用处理二进制数据的钥匙！"
