记录---啊！！！Blob 居然这么强大！
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<div>
<div>
<h2 data-id="heading-0">啊！！！Blob 居然这么强大！</h2>
<p>在前端开发的世界里，我们每天都在和各种 API、对象和数据打交道。然而，有一个对象，常常被我们忽视，却又在背后默默支撑着许多关键功能 —— 它就是 <strong>Blob</strong>。</p>
<p>Blob（Binary Large Object）听起来像是一个“冷门”对象，但实际上，它几乎无处不在：文件上传、下载、视频流、离线缓存、甚至 Service Worker 中的响应缓存……这些场景中，Blob 都在默默发挥着作用。</p>
<p>今天，就让我们揭开 Blob 的神秘面纱，看看它到底有多强大。</p>
<hr>
<h3 data-id="heading-1">一、Blob 是什么？</h3>
<p>从字面上看，Blob 是“二进制大对象”的意思。在 JavaScript 中，<code>Blob</code> 对象表示一个不可变的、原始数据的类文件对象。它不一定是文本，可以是图片、音频、视频、JSON、甚至任意二进制数据。</p>
<p>创建一个 Blob 非常简单：</p>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const blob = new Blob(['Hello, Blob!'], { type: 'text/plain' });</pre>
</div>
<div>
<div>
<p>你可以传入字符串、ArrayBuffer、BufferSource、甚至其他 Blob，再指定 MIME 类型，就可以创建一个 Blob。</p>
<hr>
<h3 data-id="heading-2">二、Blob 的“超能力”有哪些？</h3>
<h4 data-id="heading-3">1. <strong>直接生成文件下载</strong></h4>
<p>你是否还在用 <code>a</code> 标签配合 <code>download</code> 属性实现下载？试试 Blob 吧！</p>
</div>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const blob = new Blob(['这是一段文本内容'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'example.txt';
a.click();
URL.revokeObjectURL(url); // 释放内存</pre>
</div>
<p>这样你就可以动态生成文件并触发下载，无需服务器参与。非常适合前端导出日志、配置文件、甚至代码片段。</p>
<hr>
<h4 data-id="heading-4">2. 作为文件上传的桥梁</h4>
<p>上传文件时，我们通常使用 <code>File</code> 对象，而 <code>File</code> 是 <code>Blob</code> 的子类。这意味着你完全可以用 Blob 构造上传内容。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const blob = new Blob(['{"name": "Blob"}'], { type: 'application/json' });
const file = new File(, 'data.json', { type: 'application/json' });
const formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData
});</pre>
</div>
</div>
<p>你甚至可以在上传前对数据进行加密、压缩、拼接，Blob 就是你的“原材料”。</p>
<hr>
<h4 data-id="heading-5">3. 在 Service Worker 中缓存响应</h4>
<p>Service Worker 是 PWA 的核心，而缓存响应时，Blob 也是常客。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
if (response) return response;
return fetch(event.request).then(fetchResponse => {
// 假设是图片
return fetchResponse.blob().then(blob => {
caches.open('image-cache').then(cache => {
cache.put(event.request, new Response(blob));
});
return new Response(blob);
});
});
})
);
});</pre>
</div>
<p>通过 Blob 缓存资源，可以实现更灵活的缓存策略，甚至跨页面共享。</p>
<hr>
<h4 data-id="heading-6">4. 在 Web Worker 中处理大文件</h4>
<p>Web Worker 是处理耗时任务的好帮手。Blob 可以被结构化克隆，因此可以安全地在主线程和 Worker 之间传递。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// main.js
const worker = new Worker('worker.js');
const blob = new Blob(['大量数据...'], { type: 'text/plain' });
worker.postMessage(blob);
// worker.js
onmessage = function(e) {
const blob = e.data;
const reader = new FileReader();
reader.onload = function() {
console.log(reader.result);
};
reader.readAsText(blob);
};</pre>
</div>
<div>
<div>
<p>这种模式非常适合处理大型文件，比如压缩、解压、加密、解析等操作。</p>
<hr>
<h3 data-id="heading-7">三、Blob + URL.createObjectURL：前端资源的“虚拟路径”</h3>
<p>有时候，我们需要在前端生成一个“临时链接”来引用资源，比如预览图片、播放音频、嵌入 PDF 等。</p>
<div class="code-block-extension-header">
<div class="code-block-extension-headerLeft">
<div class="code-block-extension-foldBtn">
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const blob = new Blob(['PDF内容...'], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
iframe.src = url;</pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<p>这种方式不需要将文件上传到服务器，也不需要使用 base64 编码，节省内存，性能更优。</p>
<hr>
<h3 data-id="heading-8">四、Blob 的局限与注意事项</h3>
<p>虽然 Blob 很强大，但也有一些需要注意的地方：</p>
<ul>
<li><strong>不可变性</strong>：Blob 是只读的，一旦创建，内容不能修改。</li>
<li><strong>不能直接读取内容</strong>：需要配合 <code>FileReader</code> 或 <code>Response</code> 来读取。</li>
<li><strong>内存管理</strong>：使用完 <code>URL.createObjectURL</code> 后要记得调用 <code>URL.revokeObjectURL()</code>，否则会造成内存泄漏。</li>
<li><strong>兼容性</strong>：现代浏览器支持良好，但在某些老旧设备上仍需注意。</li>
</ul>
<hr>
<h3 data-id="heading-9">五、结语：Blob 是前端的“瑞士军刀”</h3>
<p>Blob 不是一个炫酷的技术，但它却是一个极其实用、灵活、不可或缺的工具。它连接了前端数据处理的多个维度：文件、网络、缓存、Worker、甚至 DOM 操作。</p>
<p>在现代 Web 开发中，理解并熟练使用 Blob，不仅能提升开发效率，还能帮助你写出更优雅、更健壮的代码。</p>
<p>所以，下次当你需要处理文件、缓存资源、生成下载、甚至构建离线应用时，别忘了：<strong>Blob 居然这么强大！</strong></p>
</div>
</div>
<div>
<h2>本文转载于：https://juejin.cn/post/7529827462151667763</h2>
</div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19019080
頁:
[1]