别再只用 base64！HTML5 的 Blob 才是二进制处理的王者，面试常考

前端开发中，90%的人都不知道：掌握Blob对象处理二进制数据的能力，是突破技术瓶颈的关键！

你是不是还在只用 base64 处理图片？面试官问 "如何高效处理大文件上传" 时一脸懵？其实 HTML5 的 Blob 对象才是二进制处理的 "隐藏王者"------ 它能轻松搞定图片预览、大文件分片、PDF 生成等高级操作，也是前端面试的高频考点。

从一个面试题说起：为什么 base64 不适合大图片？🤦‍♀️

先看一个场景：前端需要预览用户上传的图片。很多人第一反应是转成 base64：

javascript 复制代码

// 传统方式：图片转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 编码（很长，这里简化表示）：

javascript 复制代码

const base64Str = "data:image/png;base64,UklGRiAHAABXRUJQVlA4IBQHAACwHACdASpQAFAAP...";

步骤 2：从 base64 中提取纯二进制字符串

base64 编码的格式是data:类型;base64,实际编码，第一步要去掉前缀，只保留后面的二进制编码部分：

javascript 复制代码

// 去掉base64前缀（"data:image/png;base64,"）
const pureBase64 = base64Str.split(",")[1]; // 结果："UklGRiAHAABXRUJQVlA4IBQHAACwHACd..."

步骤 3：用 atob () 解码 base64，得到二进制字符串

atob()是浏览器内置的解码函数，能把 base64 字符串转成二进制字符串（注意：这里的 "字符串" 是每个字符对应一个字节的二进制数据）：

javascript 复制代码

// 解码base64，得到二进制字符串
const binaryStr = atob(pureBase64);

打印出来将会是这样

步骤 4：把二进制字符串转成 Uint8Array（二进制数组）

二进制字符串不方便直接操作，需要转成TypedArray（类型化数组） ------ 这里用Uint8Array（8 位无符号整数数组），每个元素代表一个字节的二进制数据：

javascript 复制代码

// 创建一个和二进制字符串长度相同的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）：

javascript 复制代码

// 创建Blob对象（二进制数据+类型）
const blob = new Blob([uint8Array], { type: "image/png" });

步骤 6：用 URL.createObjectURL () 生成 Blob 的访问地址

Blob 对象不能直接当src用，需要通过URL.createObjectURL()生成一个临时 URL（类似blob:http://localhost/xxx），浏览器能直接识别这个 URL：

javascript 复制代码

// 生成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应用处理二进制数据的钥匙！"