如何通过JavaScript将File对象转换为可访问的URL

你的需求完全可以实现，直接使用浏览器原生API即可完成，不需要引入第三方依赖。

推荐方案：生成Blob临时URL #

使用URL.createObjectURL()方法是性能最优的方案，该方法接收File或者Blob对象作为入参，返回一个blob:协议开头的临时URL，可以直接赋值给图片src、链接href等属性实现本地文件访问。
对应你的示例代码，实现逻辑如下：

const file = new File(["blob data"], "foo.txt", {
  type: "image/png",
});
// 生成可访问的文件URL
const accessibleUrl = URL.createObjectURL(file);

// 可以直接使用，比如挂载到图片元素上预览
const img = document.createElement('img');
img.src = accessibleUrl;
document.body.append(img);

注意事项 #

• 生成的URL是和当前页面会话绑定的临时地址，仅在当前页面打开状态下有效，刷新、关闭页面后地址会自动失效，无法跨页面、跨域持久使用
• 该URL不会自动释放内存，文件使用完成后需要手动调用URL.revokeObjectURL(accessibleUrl)释放引用，避免内存泄漏，比如图片加载完成、文件下载触发后就可以执行回收操作
• 如果需要生成可长期访问、跨端分享的URL，这个方案无法满足，你需要将File上传到服务端/对象存储服务，拿到服务端返回的公网访问地址才行

备选方案：生成Base64格式的Data URL #

如果需要拿到字符串格式的文件地址，可以使用FileReader将文件读取为Base64编码的Data URL，缺点是大文件转换速度慢、会占用更多内存，不推荐大文件场景使用：

const reader = new FileReader();
reader.onload = (e) => {
  const dataUrl = e.target.result;
  // 拿到的dataUrl格式为 data:image/png;base64,xxxx，可直接赋值使用
  console.log(dataUrl);
};
reader.readAsDataURL(file);

内容的提问来源于stack exchange，提问作者aj soprano