Blob二进制魔法：从Base64泥潭到前端文件处理大师前言你是否遇到过这些问题：前端预览图片时，Base64字符串

前言

你是否遇到过这些问题：

前端预览图片时，Base64字符串把代码搞得一团糟？
处理大文件上传时，浏览器直接崩溃？
想在前端生成并下载文件，却不得不求助后端？

如果你也曾被这些问题困扰，那么Blob（二进制大对象）就是你需要掌握的关键技术。作为HTML5引入的二进制数据处理方案，Blob让前端终于拥有了原生操作文件的能力，彻底改变了前端处理二进制数据的方式。

什么是Blob？它解决了什么前端痛点？

Blob（Binary Large Object）是浏览器提供的二进制数据容器，可以理解为「二进制文件的内存 representation」。在没有Blob之前，前端处理图片/文件时：

只能用Base64字符串传输（体积增大30%+）
无法直接操作二进制数据（裁剪/分片/压缩都要靠后端）
大文件会导致内存爆炸（Base64字符串会全部加载到内存）

浏览器将会为二进制提供一个临时访问的地址。这就是Blob的核心价值—— 让前端拥有原生二进制处理能力

Blob基础用法（从你的代码学起）

1. 创建Blob对象

代码如下：

// 1. 将Base64转为二进制字符串
const binaryStr = atob(base64Str);

// 2. 创建Uint8Array缓冲区
const uint8Array = new Uint8Array(binaryStr.length);
for (let i = 0; i < binaryStr.length; i++) {
  uint8Array[i] = binaryStr.charCodeAt(i);
}

// 3. 生成Blob对象（指定MIME类型）
const blob = new Blob([uint8Array], { type: 'image/jpeg' });

2. 创建临时URL（最常用功能）

// 创建临时URL（类似内存中的文件路径）
const blobUrl = URL.createObjectURL(blob);

// 直接用于img标签
img.src = blobUrl;

// 使用完毕必须释放！否则内存泄漏
URL.revokeObjectURL(blobUrl);

超长的base64图片就是通过这种方式转为Blob URL的，这比直接用base64字符串性能好10倍以上！

实战场景：Blob解决的3个经典问题

场景1：图片预览

没有Blob时预览图片需要：

上传文件到后端
后端返回URL
前端加载显示有了Blob后（你的代码思路）：

<input type="file" id="fileInput">
<img id="previewImg">

<script>
  fileInput.onchange = (e) => {
    const file = e.target.files[0];
    // File对象是特殊的Blob！直接创建URL
    const blobUrl = URL.createObjectURL(file);
    previewImg.src = blobUrl;
  };
</script>

场景2：大文件分片上传

Blob的slice方法可以切割文件：

// 将100MB文件切成10MB的块
function sliceFile(file) {
  const chunkSize = 10 * 1024 * 1024;
  const chunks = [];
  let start = 0;

  while (start < file.size) {
    // 关键API：Blob.slice(begin, end)
    const chunk = file.slice(start, start + chunkSize);
    chunks.push(chunk);
    start += chunkSize;
  }
  return chunks;
}

场景3：前端生成文件并下载

结合a标签实现纯前端下载：

// 创建文本Blob
const textBlob = new Blob(['Hello Blob'], { type: 'text/plain' });
const a = document.createElement('a');

a.href = URL.createObjectURL(textBlob);
a.download = 'hello.txt'; // 指定文件名

document.body.appendChild(a);
a.click();

// 清理
URL.revokeObjectURL(a.href);
document.body.removeChild(a);

必须知道的Blob陷阱

内存泄漏风险：创建的Blob URL必须用 URL.revokeObjectURL 释放
生命周期限制：页面刷新后Blob URL会失效
跨域问题：Blob URL只能在当前页面使用，不能跨域共享
不要过度使用：小图片用Base64可能更简单（如小于10KB的图标）

深入理解：从代码看Blob工作流

下面这段代码实现了完整的Base64转Blob流程：

// 1. 解码Base64
const binaryStr = atob(base64Data);

// 2. 创建二进制缓冲区
const uint8Array = new Uint8Array(binaryStr.length);
for (let i = 0; i < binaryStr.length; i++) {
  uint8Array[i] = binaryStr.charCodeAt(i);
}

// 3. 生成Blob
const blob = new Blob([uint8Array], { type: 'image/jpeg' });

// 4. 创建访问URL
const url = URL.createObjectURL(blob);
img.src = url;

这个流程完美展示了Blob的核心价值—— 在前端完成二进制数据的解码、转换和使用。

总结：什么时候应该用Blob？

处理大文件：图片/视频上传预览
二进制操作：裁剪/压缩/分片
前端生成文件：导出Excel/CSV报告
优化性能：替代大体积Base64图片

Blob就像前端的「二进制瑞士军刀」，掌握它能让你在文件处理场景中如鱼得水。你的代码已经完美展示了它的基础用法，在此基础上可以进一步探索更复杂的应用场景！

最后记住：用Blob必学 revokeObjectURL，内存泄漏毁所有