跳转到主内容
websoft网络软件专家 - 深耕网络技术,打造实用软件!

如何通过 URL.createObjectURL 将原始 Blob 数据动态转换为可渲染的 DOM 资源

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) :赋给