URL.createObjectURL是浏览器API，用于为Blob/File创建仅当前页面有效的临时blob URL，常用于H5图片本地预览；需配合URL.revokeObjectURL及时释放内存以防泄漏。
URL.createObjectURL 是浏览器提供的一个 API，用于为 Blob 或 File 对象创建一个本地临时的、仅在当前页面生命周期内有效的 URL。在 H5（HTML5）中，它常被用来快速预览用户选择的图片，而无需上传到服务器。
核心原理：把文件转成可访问的 blob URL
用户通过 <input type="file"> 选中图片后，得到的是一个 File 对象（继承自 Blob）。调用 URL.createObjectURL(file) 就会返回形如 blob:https://example.com/xxx-xxx-xxx 的临时地址，可直接赋给 <img src alt="H5 中怎么利用 URL.createObjectURL 生成本地临时图片访问链接" > 进行本地预览。
基本使用步骤
- 添加文件选择控件：
<input type="file" accept="image/*" id="fileInput"> - 监听 change 事件，获取选中的
File对象（注意：files[0]才是单个文件） - 调用
URL.createObjectURL(file)得到临时 URL - 将该 URL 赋值给
<img alt="H5 中怎么利用 URL.createObjectURL 生成本地临时图片访问链接" >的src属性 - （重要）在不再需要时调用
URL.revokeObjectURL(url)释放内存，避免内存泄漏
完整示例代码
（可直接复制到 HTML 文件中运行）
<input type="file" accept="image/*" id="fileInput">
<img id="preview" style="max-width:90%" style="max-width:90%" alt="预览图">
<script>
const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');
fileInput.addEventListener('change', function (e) {
const file = e.target.files[0];
if (!file || !file.type.startsWith('image/')) return;
// 创建临时 URL
const url = URL.createObjectURL(file);
preview.src = url;
// 清理：当图片加载完成或页面卸载前，建议手动释放（尤其在频繁切换图片时）
preview.onload = () => URL.revokeObjectURL(url);
});
</script>
注意事项和常见问题
- 生命周期限制：生成的 blob URL 仅在当前文档打开期间有效；页面关闭或刷新后自动失效
-
必须及时释放：每次调用
createObjectURL都会占用内存，重复操作不revoke容易导致内存堆积 - 不能跨域访问：该 URL 只能在同源上下文中使用，且无法通过 AJAX 获取其内容（它是浏览器内部映射，不是真实 HTTP 地址）
-
不适用于大文件长期预览：虽然支持视频、音频等 Blob，但大图可能影响渲染性能，建议结合
canvas压缩后再生成 URL
