blob url 的“虚拟化访问”是指通过 url.createobjecturl() 将内存中的 blob/file 映射为形如 blob:https://... 的临时 url，使其可被 img/video/iframe 等直接加载，仅当前文档有效且无需网络或磁盘存储。
什么是 Blob URL 的“虚拟化访问”
所谓“虚拟化访问”，不是指绕过同源策略或伪造跨域权限，而是利用 URL.createObjectURL() 将本地内存中的 Blob 或 File 对象映射为一个浏览器可识别的、形如 blob:https://example.com/xxx 的临时 URL。这个 URL 不指向网络地址，也不写入磁盘，仅在当前 document 生命周期内有效——它把二进制数据“虚拟挂载”为一个可被 <img>、<video></video>、<iframe></iframe> 等标签直接加载的资源路径。
为什么在线运行环境（如 JSFiddle、CodePen）里不能直接用 file:// 或本地路径
现代浏览器禁止网页脚本读取 file:// 协议下的本地文件（除非手动启动带 --allow-file-access-from-files 的 Chrome），而在线运行环境本身运行在沙盒化的远程 origin（如 https://jsfiddle.net）下，更无法访问用户本地文件系统。此时唯一合法且通用的“本地资源接入方式”就是：用户通过 <input type="file"> 选择文件 → 脚本读取为 File 对象 → 转成 Blob → 生成 blob: URL → 绑定到目标标签。
-
File是Blob的子类，所以可直接传给URL.createObjectURL() - 不能用
fetch('file:///...')或XMLHttpRequest加载本地路径——会触发 CORS 或协议不被允许错误 - 生成的
blob:URL 只能在同源 document 内使用；跨 iframe 或新窗口需确保 origin 一致，否则<img src="blob:...">会静默失败
实操：三步完成图片/视频的 Blob 虚拟加载
以图片为例，在 CodePen 中粘贴以下代码即可运行：
<input type="file" accept="image/*" id="fileInput">
@@##@@
<script>
document.getElementById('fileInput').onchange = function (e) {
const file = e.target.files[0];
if (!file) return;
const url = URL.createObjectURL(file);
document.getElementById('preview').src = url;
// ✅ 关键：用完必须 revoke，尤其在频繁切换文件时
// 否则内存持续增长，Chrome 里可能卡顿甚至崩溃
document.getElementById('preview').onload = () => URL.revokeObjectURL(url);
};
</script>
- 对
<video></video>同理：将src设为blob:URL 即可播放，无需额外解码逻辑 - 若需下载该 Blob 资源，不要用
location.href = blobUrl（部分浏览器不支持 download），应创建<a download></a>并触发.click() - 注意
accept属性和 MIME 类型校验：用户可能选错类型，file.type可能为空或不可靠，建议结合file.name.split('.').pop()做后缀 fallback
容易忽略的生命周期与内存陷阱
blob: URL 的生命周期严格绑定于创建它的 document，但浏览器不会自动清理所有已创建的 URL。如果页面长期运行（比如单页应用反复预览不同文件），未调用 URL.revokeObjectURL() 会导致内存泄漏——Blob 数据保留在内存中，GC 无法回收。
- 每次调用
URL.createObjectURL()都分配新内存，即使传入同一个Blob对象 - 不要在循环或事件高频回调中无节制生成 URL，务必配对
revoke - 推荐做法：将 URL 存入变量，在资源加载完成、出错或 DOM 移除时立即
revoke；也可监听beforeunload做兜底清理 - 在 iframe 沙盒环境中（如某些在线 IDE），
URL.createObjectURL()可能被禁用，需检查控制台是否报SecurityError
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
