Blob URL 管理：URL.createObjectURL 与 revokeObjectURL

---

title: Blob URL 管理：URL.createObjectURL 与 revokeObjectURL

keywords:

• Blob URL
• createObjectURL
• revokeObjectURL
• 资源释放
• 内存治理

description: 使用 Blob URL 在本地展示文件或媒体，并在使用结束后及时 revokeObjectURL 释放资源，避免内存泄漏，含加载与回退策略。

categories:

• 文章资讯
• 编程技术

---

概述

Blob URL 将内存对象映射为可访问的 URL，适合预览文件与媒体。需在使用结束后撤销，避免资源与内存泄漏。

用法/示例

const url = URL.createObjectURL(file)
img.src = url
img.onload = () => URL.revokeObjectURL(url)

工程建议

• 为视频与大文件设置释放时机与兜底清理；在路由切换时统一回收。
• 对不支持场景回退到 FileReader 或服务器端 URL；控制并发预览数量。
• 记录使用与释放事件，避免忘记撤销造成泄漏。

参考与验证

• MDN：URL.createObjectURL() — https://developer.mozilla.org/docs/Web/API/URL/createObjectURL
• MDN：URL.revokeObjectURL() — https://developer.mozilla.org/docs/Web/API/URL/revokeObjectURL