如何在Typescript/Javascript中无需交互加载已有文件？

嘿，这个问题我之前也踩过坑！先给你划个重点：纯浏览器环境下，出于安全隐私保护，JS根本没法直接通过本地文件路径读取内容——浏览器会把脚本访问本地文件系统的权限卡得死死的，这也是为啥咱们平时只能靠<input type="file">让用户手动选文件才能拿到File对象。

不过分场景来看，还是有对应的解决办法的：

1. Node.js/Electron这类有文件系统权限的环境 #

如果是在后端、Electron桌面应用这种能直接碰本地文件的环境，那事儿就简单了，用Node.js的fs模块就能搞定：

const fs = require('fs').promises;
const { Blob } = require('buffer');

async function getFileObjectsFromPath(filePath) {
  // 先把文件读成Buffer
  const fileBuffer = await fs.readFile(filePath);
  // 转成Blob对象，这里可以根据文件类型改type参数，比如图片用'image/jpeg'
  const blob = new Blob([fileBuffer], { type: 'application/octet-stream' });
  // 要File对象的话，加个文件名就行
  const file = new File([fileBuffer], '你想要的文件名', { type: 'application/octet-stream' });
  
  return { blob, file };
}

// 调用试试
getFileObjectsFromFilePath('/Users/xxx/Desktop/photo.png')
  .then(res => console.log('拿到Blob啦:', res.blob))
  .catch(err => console.error('读取翻车了:', err));

要是用Electron的渲染进程，记得要么在主进程读了传过来，要么配置好上下文隔离权限，别直接在渲染进程瞎搞权限哈。

2. 纯浏览器环境的替代思路 #

如果必须在浏览器里搞，那直接读本地路径是没戏了，只能换个思路：

• 缓存用户上传的文件：第一次让用户通过<input type="file">选完文件后，把File对象存在内存里（或者用IndexedDB存大文件），之后就直接复用这个对象，不用再麻烦用户选。
• 靠后端代理读取：把文件路径传给后端接口，让后端去读文件然后返回二进制内容，前端再把返回的数据转成Blob：

async function getBlobViaServer(filePath) {
  const res = await fetch(`/api/read-local-file?path=${encodeURIComponent(filePath)}`);
  if (!res.ok) throw new Error('后端读取文件失败');
  const blob = await res.blob();
  return blob;
}

⚠️ 这里要提醒一句：后端处理这个接口的时候一定要做严格的权限校验和路径过滤，别让人随便遍历服务器上的文件！

总结一下，核心就是浏览器的安全限制卡死了直接读路径的可能，得根据你实际运行的环境来选对应的方案～

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