如何不使用showOpenFilePicker通过File System Access API直接打开指定文件

出于浏览器安全机制限制，前端JavaScript无法直接通过本地路径打开指定文件——这是为了防止恶意网站未经授权读取用户本地文件，必须通过用户交互（如文件选择操作）获得权限后才能访问文件系统。

以下是两种可行的替代方案：

方案1：先获取目录授权，后续直接访问指定文件 #

通过showDirectoryPicker让用户选择一次目标根目录，之后就可以在该目录下直接访问指定文件名的文件，无需重复让用户选择：

// 仅需用户授权一次，保存根目录句柄
let rootDirHandle;

async function initRootDir() {
  rootDirHandle = await window.showDirectoryPicker();
}

// 后续直接读取指定文件
this.getFileAsText = async function () {
  if (!rootDirHandle) {
    console.error('请先授权根目录访问权限');
    return null;
  }
  try {
    // 直接获取指定文件名的文件句柄
    const fileHandle = await rootDirHandle.getFileHandle('test.txt');
    const fileData = await fileHandle.getFile();
    return await fileData.text();
  } catch (err) {
    console.error('文件不存在或无访问权限:', err);
    return null;
  }
}

方案2：若文件在服务器，直接用Fetch请求 #

如果目标文件是同源服务器上的文件，无需文件选择器，直接通过fetch请求读取内容：

this.getFileAsText = async function () {
  try {
    const response = await fetch('myPath/test.txt');
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    return await response.text();
  } catch (err) {
    console.error('读取文件失败:', err);
    return null;
  }
}

关键说明 #

浏览器的安全策略禁止前端直接绕过用户授权访问本地文件路径，因此你期望的directFile(myPath/test.txt)这类直接通过路径打开本地文件的API并不存在，必须依赖用户的授权交互来获取文件系统访问权限。

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