URL.createObjectURL 为 Blob 创建内存级临时 URL（如 blob:https://...），仅当前文档有效，需配合 revokeObjectURL 及时释放以防内存泄漏；适用于图片、音视频、PDF 等本地即时渲染，不支持长期缓存或跨页共享。
URL.createObjectURL 可以把 Blob（或 File）对象快速转成一个浏览器内部可访问的临时 URL，用于图片、音视频、PDF 等资源的即时渲染，无需上传服务器或构造 base64 字符串。
核心原理：创建内存级临时引用
createObjectURL 不复制数据，而是为 Blob 在浏览器内存中生成一个唯一、只读的临时 URL（形如 blob:https://example.com/abc123）。该 URL 仅在当前文档生命周期内有效，页面关闭或显式调用 URL.revokeObjectURL() 后即失效。
- 适合一次性预览、本地文件处理、流式内容加载等场景
- 不适用于长期缓存或跨页面共享（URL 无法复用，且 Blob 本身不持久）
- 频繁创建未释放会导致内存泄漏，务必配合 revoke 使用
常见类型转换与 DOM 渲染示例
根据 Blob 的 MIME 类型，选择对应 HTML 元素并赋值 src 或 href 属性即可渲染：
-
图片（image/*）：赋给
<img src="..."> -
音视频（audio/*, video/*）：赋给
<audio src="...">或<video src="..."> -
PDF（application/pdf）：赋给
<iframe src="...">或<a href="..." download> -
文本（text/plain, application/json）：可读取后插入
<pre>，或通过<a href="..." download>触发下载
安全与清理的关键实践
临时 URL 虽方便，但需主动管理生命周期：
- 每次调用 createObjectURL 后，应保存返回的 URL 字符串，并在不再需要时立即调用 URL.revokeObjectURL(url)
- 推荐在元素卸载前（如组件 unmount、DOM 移除、用户切换视图）执行 revoke
- 若 Blob 来自
fetch().then(r => r.blob())，注意响应体只能读取一次，重复调用 blob() 会返回空 Blob - 避免将 createObjectURL 结果直接拼接进 innerHTML，防止 XSS（应使用
element.src = url等属性赋值方式）
一个完整可用的图片预览片段
假设你已有一个 imageBlob：
const img = new Image(); const url = URL.createObjectURL(imageBlob); img.onload = () => URL.revokeObjectURL(url); // 渲染成功后立即释放 img.onerror = () => URL.revokeObjectURL(url); // 加载失败也要释放 img.src = url; document.body.appendChild(img);
这样既保证资源及时渲染，又避免内存滞留。
