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/*)
:赋给
音视频(audio/*, video/*)
:赋给
或
PDF(application/pdf)
:赋给
或
文本(text/plain, application/json)
:可读取后插入
,或通过
触发下载
安全与清理的关键实践
临时 URL 虽方便,但需主动管理生命周期:
每次调用 createObjectURL 后,应保存返回的 URL 字符串,并在不再需要时立即调用
URL.revokeObjectURL(url)
推荐在元素卸载前(如组件 unmount、DOM 移除、用户切换视图)执行 revoke
若 Blob 来自
,注意响应体只能读取一次,重复调用 blob() 会返回空 Blob
避免将 createObjectURL 结果直接拼接进 innerHTML,防止 XSS(应使用
等属性赋值方式)
一个完整可用的图片预览片段
假设你已有一个 imageBlob:
这样既保证资源及时渲染,又避免内存滞留。
fetch().then(r => r.blob())element.src = urlconst 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);
