📚 深入理解HTML5中的Blob对象：图片上传的底层逻辑

绅士玖
85 阅读6分钟

🌟 Blob对象简介

Blob（Binary Large Object）是HTML5中引入的一个强大对象，它代表不可变的原始数据。就像它的名字"大二进制对象"所暗示的，Blob主要用于处理二进制数据，如图片、音频、视频或其他文件。

// 创建一个简单的Blob对象
const simpleBlob = new Blob(["Hello, World!"], {type: 'text/plain'});

Blob 构造函数接受两个参数：

  1. 第一个参数：["Hello, World!"]

    • 这是一个数组，包含要放入 Blob 的数据
    • 数组元素可以是字符串、ArrayBuffer、ArrayBufferView 或其他 Blob 对象
    • 这里是一个简单的字符串 "Hello, World!"

  2. 第二个参数：{type: 'text/plain'}

    • 这是一个可选的配置对象
    • type 属性指定 Blob 的 MIME 类型
    • 这里设置为 'text/plain'，表示纯文本类型
    • 如果不指定，默认为空字符串 ""

所以这个 Blob 对象包含文本 "Hello, World!"，并且被标记为纯文本类型。这种 Blob 可以用于多种场景，比如创建下载链接、通过 URL.createObjectURL() 生成临时 URL，或者通过 XMLHttpRequest/Fetch API 上传等。

详细使用可以参考：Blob - Web API | MDN

🔍 为什么需要Blob？

在Web开发中，我们经常需要处理各种二进制数据：

  • 图片上传和预览
  • 文件分割上传
  • 生成PDF或其他二进制文件
  • 处理音频/视频数据

Blob提供了在浏览器中操作这些二进制数据的标准方式，无需依赖插件或复杂的转换。

🛠️ 案例分析：图片上传的底层逻辑

让我们详细分析下面提供的示例代码，它演示了如何将Base64编码的图片数据转换为Blob对象，然后生成可用的URL：

如果你想获取一张图片的Base64编码可以：图片在线转换Base64 | 图片编码base64使用这个网站，上传一张图片转为对应的Base64编码。

image.png

ok呀，让我们一起来看看对应的代码吧！！

// 1️⃣ 使用atob()解码Base64字符串
// atob()函数将Base64编码的字符串解码为二进制字符串
const base64Data = atob('url'); // 这里'url'应替换为实际的Base64字符串
// 注意：实际使用时需要去掉'data:image/png;base64,'这样的前缀

// 2️⃣ 创建Uint8Array来存储二进制数据
// Uint8Array是一种类型化数组，每个元素是0-255的无符号8位整数
const byteArray = new Uint8Array(base64Data.length);

// 3️⃣ 将每个字符的Unicode值存入Uint8Array
for(let i = 0; i < base64Data.length; i++) {
    // charCodeAt()获取字符的Unicode值（0-65535）
    byteArray[i] = base64Data.charCodeAt(i);
}

// 4️⃣ 创建Blob对象
// 第一个参数是数据数组，第二个参数是包含type属性的对象
const blob = new Blob([byteArray], {type: 'image/png'});

// 5️⃣ 生成对象URL
// URL.createObjectURL()为Blob创建一个临时URL，可用于引用该Blob
const imageUrl = URL.createObjectURL(blob);

// 6️⃣ 将生成的URL赋给img标签的src属性
document.getElementById('blobImage').src = imageUrl;

📌 关键知识点详解

1. Base64编码/解码

Base64是一种用64个字符表示二进制数据的方法：

  • btoa(): 将二进制字符串编码为Base64
  • atob(): 将Base64字符串解码为二进制字符串

2. Uint8Array类型数组

Uint8Array是JavaScript的类型化数组，特点：

  • 每个元素是8位无符号整数（0-255）
  • 比普通数组更高效地处理二进制数据
  • 固定长度，创建后大小不能改变

3. Blob构造函数

new Blob(parts, options)参数：

  • parts: 数据数组，可以是字符串、ArrayBuffer、ArrayBufferView、Blob等

  • options: 可选对象，主要属性：

    • type: 表示Blob内容的MIME类型，如'image/png'、'text/plain'等

4. URL.createObjectURL()

这个方法非常有用：

  • 为Blob对象创建一个唯一的URL
  • 格式：blob:<origin>/<uuid>
  • 创建的URL只在文档打开期间有效
  • 使用后应调用URL.revokeObjectURL()释放内存

注意：

URL.createObjectURL() 生成的地址（Blob URL）默认只能在当前浏览器实例中访问，具体限制如下：

  1. 同源限制

    • Blob URL 遵循同源策略，只有创建它的页面所在的源（协议+域名+端口） 可以访问。其他网站无法使用该 URL。
    • 如果通过 postMessage 或其他方式将 Blob URL 传递给同源的另一个窗口/iframe，它们可以访问。

  2. 仅限当前浏览器会话

    • Blob URL 仅在当前浏览器标签页或窗口的生命周期内有效。关闭页面后，URL 会自动失效（内存释放）。
    • 即使同一台电脑上的另一个浏览器进程或新标签页也无法直接使用该 URL。

  3. 不能跨设备访问

    • Blob URL 是对浏览器内存中 Blob 数据的引用，不会上传到网络。其他设备（包括同一局域网内的设备）无法通过该 URL 访问文件。

示例验证

// 在当前页面生成 Blob URL
const blob = new Blob(["Hello, world!"], { type: "text/plain" });
const blobUrl = URL.createObjectURL(blob);
console.log(blobUrl); // 类似：blob:https://example.com/1a2b3c...

// 以下情况会失败：
// 1. 在新标签页直接打开此 URL（即使是同一网站也可能因浏览器实现不同而失败）
// 2. 在其他设备上访问此 URL（完全无效）

如果需要跨设备共享

  • 上传到服务器：通过 fetch 或 FormData 将文件上传到服务器，生成真正的 HTTP URL。
  • 使用 FileReader 读取为 Data URL（Base64），但注意数据会嵌入到 URL 中，可能不适用于大文件。

总结

Blob URL 是浏览器临时生成的一个本地虚拟 URL，仅限当前页面或同源上下文使用，既不能跨设备，也不能持久化保存。

💡 Blob的实际应用场景

  1. 图片预览：用户上传图片前显示预览
  2. 文件分片上传：大文件分割为多个Blob上传
  3. 生成文件：在客户端生成PDF/Excel等文件
  4. 视频处理：处理视频帧或音频数据
  5. 离线存储：与IndexedDB结合存储二进制数据

🚀 性能优化建议

  1. 及时释放URL：使用完Blob URL后调用URL.revokeObjectURL()
  2. 分块处理：大文件处理时分块进行，避免内存问题
  3. 类型匹配：正确设置Blob的MIME类型
  4. Web Worker：大数据处理放在Web Worker中

🎯 总结

Blob对象是HTML5中处理二进制数据的核心工具，它：

  • 提供了标准化的二进制数据处理方式
  • 支持多种数据源和类型
  • 与File API、URL API等完美配合
  • 为现代Web应用提供了强大的文件处理能力

掌握Blob对象的使用，能让你的Web应用具备更强大的文件处理能力，为用户提供更丰富的交互体验！

// 最后别忘了释放URL（在实际应用中）
// URL.revokeObjectURL(imageUrl);

希望这篇博客能帮助你理解Blob的强大功能！🚀 如果有任何问题，欢迎讨论！

avatar
文章
阅读
粉丝