别再滥用 Base64 了——Blob 才是前端减负的正确姿势

一、什么是 Blob？

Blob（Binary Large Object，二进制大对象）是浏览器提供的一种不可变、类文件的原始数据容器。它可以存储任意类型的二进制或文本数据，例如图片、音频、PDF、甚至一段纯文本。与 File 对象相比，Blob 更底层，File 实际上继承自 Blob，并额外携带了 name、lastModified 等元信息 。

Blob 最大的特点是纯客户端、零网络：数据一旦进入 Blob，就活在内存里，无需上传服务器即可预览、下载或进一步加工。

二、构造一个 Blob：一行代码搞定

const blob = new Blob(parts, options);

示例：动态生成一个 Markdown 文件并让用户下载

const content = '# Hello Blob\n> 由浏览器动态生成';
const blob = new Blob([content], { type: 'text/markdown' });
const url = URL.createObjectURL(blob);

const a = document.createElement('a');

a.href = url;

a.download = 'hello.md';

a.click();

// 内存用完即弃
URL.revokeObjectURL(url);

三、Blob URL：给内存中的数据一个“临时地址”

1. 生成方式

const url = URL.createObjectURL(blob);
// 返回值样例
// blob:https://localhost:3000/550e8400-e29b-41d4-a716-446655440000

2. 生命周期

• 
  
• 作用域：仅在当前文档、当前会话有效；页面刷新、close()、手动调用 revokeObjectURL() 都会使其失效 。
  
• 性能陷阱：不主动释放会造成内存泄漏，尤其在单页应用或大量图片预览场景 。
  

最佳实践封装：

function createTempURL(blob) {
const url = URL.createObjectURL(blob);
// 自动 revoke，避免忘记
requestIdleCallback(() => URL.revokeObjectURL(url));
return url;

}

四、Blob vs. Base64 vs. ArrayBuffer：如何选型？

五、高频实战场景

1. 本地图片/视频预览（零上传）

<input type="file" accept="image/*" id="uploader">
<img id="preview" style="max-width: 100%">

<script>

uploader.onchange = e => {
const file = e.target.files[0];
if (!file) return;
const url = URL.createObjectURL(file);

  preview.src = url;

  preview.onload = () => URL.revokeObjectURL(url); // 加载完即释放

};
</script>

2. 将 Canvas 绘图导出为 PNG 并下载

canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');

  a.href = url;

  a.download = 'snapshot.png';

  a.click();
URL.revokeObjectURL(url);

}, 'image/png');

3. 抓取远程图片→Blob→本地预览（跨域需 CORS）

fetch('https://i.imgur.com/xxx.png', { mode: 'cors' })

  .then(r => r.blob())

  .then(blob => {
const url = URL.createObjectURL(blob);
document.querySelector('img').src = url;

  });

若出现图片不显示，99% 是因为服务端未返回 Access-Control-Allow-Origin 头 。

六、踩坑指南与性能锦囊

七、延伸：Blob 与 Stream 的梦幻联动

当文件超大（GB 级）时，全部读进内存并不现实。可以借助 ReadableStream 把 Blob 转为流，实现渐进式上传：

const stream = blob.stream(); // 返回 ReadableStream
await fetch('/upload', {
method: 'POST',
body: stream,
headers: { 'Content-Type': blob.type }

});

Chrome 85+、Edge 85+、Firefox 已经支持 blob.stream()，能以流式形式边读边传，内存占用极低。

八、总结：记住“三句话”

用好 Blob，既能提升用户体验（秒开预览），又能降低服务端压力（无需中转），是每一位前端工程师的必备技能。