URL.createObjectURL() 和 URL.revokeObjectURL() 文件预览

URL.createObjectURL()(推荐）

将 Blob、File、MediaSource 等对象转换为临时可访问的 URL，该 URL 仅在当前文档生命周期内有效。

const objectURL = URL.createObjectURL(object);

• 每次调用生成唯一的 URL，即使同一对象多次调用也会生成不同 URL。
• 适用于预览文件（如图片、视频）或动态下载链接生成。

U‌RL.revokeObjectURL():

手动释放通过 createObjectURL() 创建的 URL，避免内存泄漏

URL.revokeObjectURL(objectURL);

• 页面关闭时浏览器会自动释放，但主动调用可优化性能。
• 释放后 URL 立即失效，相关资源无法再访问

文件预览

document.querySelector('input[type="file"]').onchange = (e) => {
  const file = e.target.files[0];
  const imgUrl = URL.createObjectURL(file);
  document.getElementById('preview').src = imgUrl;
  // 预览完成后释放
  // URL.revokeObjectURL(imgUrl);
};

（适用于图片、视频等媒体文件的即时展示。）

动态下载文件

const blob = new Blob(['Hello World'], { type: 'text/plain' });
const downloadUrl = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = downloadUrl;
link.download = 'example.txt';
link.click();
URL.revokeObjectURL(downloadUrl); // 下载后立即释放

（生成临时链接触发下载，适用于导出数据。）

‌ 与 FileReader.readAsDataURL() 的区别‌

• ‌createObjectURL‌：生成临时 URL，不读取文件内容，性能更高，适合大文件。
• ‌readAsDataURL‌：将文件转为 Base64 字符串，占用更多内存，但可直接嵌入 HTML，直接用于img 和  a标签 。

---

‌ 跨域问题处理‌

若需下载跨域资源，需服务器设置 Content-Disposition 响应头，否则 download 属性失效

FileReader.readAsDataURL() 

FileReader.readAsDataURL() 是 JavaScript 中用于将文件（如 Blob 或 File 对象）转换为 Base64 编码的 Data URL 的方法，常用于前端文件预览或内嵌资源处理

const reader = new FileReader();
reader.readAsDataURL(file); // 异步读取文件
reader.onload = (event) => {
  console.log(event.target.result); // 输出 Data URL
};

需通过 onload 事件获取结果，因操作是异步的.