什么是 Blob URL？以及是怎么产生的一文告诉你全部

以 blob: 开头的链接，并不是一个真实的、存储在服务器上的图片地址。它是一种在浏览器内部生成的临时URL，通常与前端JavaScript技术有关。

下面为您详细解释这种链接是如何造成的，以及它的工作原理。

什么是 Blob URL？

Blob URL（或 Object URL）是浏览器为存储在内存中的二进制数据（即 Blob 或 File 对象）生成的一个临时本地URL。这个URL的格式通常是 blob:<origin>/<uuid>，例如您提供的 blob:https://example.com/05d6152a-3441-42df-903d-2f25378a2675。

• blob:： 协议头，表明这是一个Blob URL。

• https://example.com： 创建这个Blob URL的页面的源（origin）。这意味着只有在这个域名下的页面才能访问这个资源。

• 05d6152a-3441-42df-903d-2f25378a2675： 一个唯一的标识符（UUID）。

它是如何造成的？（产生流程）

这种链接通常出现在涉及文件上传、图片处理或音视频播放的网页中。以下是几种典型的产生场景：

1. 用户上传图片/文件
这是最常见的情况。当您在网页上通过 <input type="file"> 选择一张图片后，前端JavaScript会拿到这个文件对象。

• 步骤：

  1. 用户在选择文件对话框中选中了一个图片文件。

  2. JavaScript通过 fileInput.files[0] 获取到一个 File 对象（File 是 Blob 的一种特殊类型）。

  3. 为了在不真正上传到服务器的情况下就能预览这张图片，前端代码会调用 URL.createObjectURL(file)。

  4. 浏览器在内存中创建一个指向该文件数据的Blob URL，并返回这个URL（就是您看到的那种格式）。

  5. 前端将这个Blob URL设置为 <img> 标签的 src 属性。

  6. 于是，您就在页面上看到了图片的预览，而图片的地址栏显示的正是这个Blob URL。

2. 通过Canvas处理或生成图片
如果网页使用 <canvas> 元素对图片进行了裁剪、滤镜等处理，处理后的结果可以转换为一个Blob，进而生成一个Blob URL用于显示或下载。

3. 接收来自网络的数据流
在某些高级应用中，通过 Fetch API 或 XMLHttpRequest 从服务器接收二进制数据流（如分片传输的视频），前端可以将这些数据块组合成一个Blob，然后为其创建URL，用于在 <video> 标签中播放。

Blob URL 的特点

• 同源限制： 它只在创建它的同一个浏览器会话和同一个源（域名、协议、端口）下有效。您不能将这个链接复制到另一个浏览器标签页或发给别人访问，那样会无效。

• 临时性： 它存在于浏览器的内存中。当您关闭或刷新创建该URL的网页标签页时，这个Blob URL就会失效。

• 内存管理： 为了释放内存，最好在不再需要时手动撤销（revoke）它，通过 URL.revokeObjectURL(blobUrl)。不过即使不手动撤销，在网页关闭或刷新时浏览器也会自动清理。

总结

您看到的 blob:https://example.com/05d6152a-3441-42df-903d-2f25378a2675 这个链接，是 CRM系统网页前端为了预览您刚刚上传的图片，而在您自己电脑的浏览器内存中临时生成的一个地址。它并没有存储在 example.com 这个服务器的硬盘上，只是一个指向您本地浏览器内存中数据的“快捷方式”。

这是一个完全正常且常见的前端技术行为，主要用于提升用户交互体验（如即时预览）。