url.createobjecturl是图片预览首选方案，因它原生支持、无需上传、毫秒响应，不触发base64编码且内存占用低，但必须手动revoke释放以防泄漏。
为什么 URL.createObjectURL 是图片预览的首选方案
因为它是浏览器原生支持的、无需上传服务器就能生成可直接用于 <img> 的临时 URL，整个过程在内存中完成，毫秒级响应。相比 FileReader + base64，它不触发 Base64 编码开销，也不占用大量字符串内存，特别适合大图（如 5MB+）快速显示。
但注意：URL.createObjectURL 返回的是一个引用，必须手动释放，否则会持续占用内存并导致内存泄漏——这是绝大多数人忽略的关键点。
如何正确绑定 input[type="file"] 并生成预览图
核心是监听 change 事件，从 event.target.files 中取到 File 对象，再调用 URL.createObjectURL：
<input type="file" accept="image/*" id="imageInput"><img id="preview" alt="预览图">
accept="image/*" 能过滤非图片文件，减少后续类型判断负担；id="preview" 的 <img> 元素需提前存在，避免 DOM 查询开销。
- 只处理第一个文件：
const file = event.target.files[0]，多图场景需遍历，但单图编辑器里通常只需一张 - 必须校验
file是否存在且为图片：if (file && file.type.startsWith('image/')) - 生成 URL 后立即赋给
img.src：preview.src = URL.createObjectURL(file) - 记得清空上次的 input 值（防止重复选同一文件不触发 change）：
event.target.value = ''
为什么预览后图片不更新？常见释放时机错误
问题现象：第二次选不同图片，预览仍显示第一张；或反复操作后内存暴涨，页面变卡。根本原因在于没调用 URL.revokeObjectURL 释放旧引用。
释放必须发生在「新 URL 生效前」或「组件卸载时」，不能等图片加载完再释放（容易被 GC 拖延），也不能放在 load 回调里（可能来不及）。
- 每次生成新 URL 前，先保存旧
src并 revoke：if (preview.src) URL.revokeObjectURL(preview.src) - 如果使用 React/Vue 等框架，务必在
useEffect或beforeUnmount中 revoke 所有已创建的 URL - 不要对同一个
File多次调用createObjectURL——它返回的是新引用，旧的不会自动失效 - Chrome DevTools 的 Memory 面板里搜索
blob:协议 URL，能快速定位未释放的实例
在富文本编辑器中嵌入预览图的注意事项
HTML 编辑器（如 contenteditable 或 Quill、Tiptap）里插入图片，不能只改 <img src>，还要确保 DOM 插入逻辑兼容 Object URL 的生命周期。
- 插入前先生成 URL，再构造
<img src="blob:xxx">片段，用insertHTML或编辑器 API 插入 - 编辑器内容序列化（如获取
innerHTML）时，blob:URL 会丢失——它只在当前页面会话有效，导出 HTML 必须另存为 base64 或上传后替换 - 撤销/重做操作中，若缓存了含
blob:的 HTML，恢复时需重新 createObjectURL，不能直接复用旧 URL - 移动端 Safari 对
createObjectURL支持良好，但 iOS 15 之前不支持revokeObjectURL——需加 try/catch 兜底
最易被忽略的一点：Object URL 不是永久链接，页面刷新即失效；任何依赖“持久化预览”的逻辑（比如编辑中途刷新还想看到图），都得配合本地存储或临时 canvas 截图做 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
