标签: file-system-access-api

当尝试使用FileSystemFileHandlegetFile()的方法访问文件时，可能会发生此错误：DOMException: The request is not allowed by the user agent or the platform in the current context.

这段代码的工作原理：

async function getTheFile() {
  // open file picker
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // get file contents
  const fileData = await fileHandle.getFile();
}

但是，如果您存储fileHandle（例如使用 IndexedDB）的目的是即使在页面刷新后仍保留对文件的访问，则它将不起作用。刷新页面后，该getFile()方法将抛出 DOMException 错误。

这是怎么回事？

我有一个 create-react-app 使用File System Access API读取和写入本地文件。当在浏览器（支持它的 Chrome 或 Edge）中运行时，读取和写入文件都可以正常工作。

当应用程序在 Electron 中运行时，读取可以工作，但写入会失败，原因是：Uncaught (in promise) DOMException: The request is not allowed by the user agent or the platform in the current context.

我使用的是最新的 Electron (12.0.1)，它使用与我的 Chrome 浏览器相同的 Chromium (89.0.4389.82)。

下面是相关代码。调用后的控制台日志在浏览器和Electron中requestPermission显示true和。grantedtruedenied

我尝试webSecurity在创建时禁用BrowserWindow，禁用沙箱，appendSwitch但没有任何帮助。

有没有办法给Electron中的Chromium更多的权限？

如果没有，我愿意在 Electron 中以不同的方式处理文件写入。那么，TODO在代码中应该写什么来代替呢？请注意，因为它是一个 create-react-app，所以该fs模块不可用。

export async function chooseAndReadFile() {
    const fileHandle = await window.showOpenFilePicker().then((handles) => handles[0])
    const file …

我可以使用文件系统访问 API ( https://web.dev/file-system-access/ ) 在网站内创建类似文件资源管理器的东西 (react)。

我计划制作一个简单的在线文件资源管理器，让您浏览打开一个文件夹，然后让您浏览该文件夹、播放视频和 MP3。

（我知道几年前这是不可能的，因为 js 不可能访问本地存储中的任何内容，我只是想知道是否有任何更改。如果文件系统访问 API 不是可行的方法，您能否建议一些更好的方法来从文件夹中读取批量本地文件。）

我一直在关注这篇文章，以允许用户（半）自动将客户端生成的 XML 文件保存到特定的本地文件夹。第三方程序正在监视此文件夹，并将处理其内容并将内容输出到另一个文件中。

问题是，从创建文件到使用 close() 方法将内容实际写入文件大约需要 250 毫秒。

有时，第三方程序会检测到文件已创建，并尝试在写入之前读取其内容。该程序不支持在尝试读取文件内容之前添加延迟。

我已经考虑过将文件写入临时位置并在关闭后将其移动，但这似乎无法通过此 API 实现。重命名文件也是如此。

使用普通对话框创建/下载文件可能会起作用，但这需要手动步骤，而使用文件系统访问 API 可以避免这些步骤。

另一个解决方案是安装一个本地程序，该程序可以在关闭时将文件从临时文件夹移动到程序监视文件夹，但我宁愿避免在客户端上安装软件。

还有其他方法可以避免这个问题吗？

谢谢

当我选择一个文件夹时，我确实得到了 dirHandle 但无法弄清楚什么属性或方法将为我提供完整路径

const dirHandle = await window.showDirectoryPicker()

所以类似 let path = dirHandle.fullpath

有任何想法吗？

我正在开发一个 chrome 扩展，它会提示用户输入一个目录，然后将特定文件从该目录上传到该扩展处于活动状态的网站。理想情况下，当这些文件在用户驱动器上发生更改时，此扩展程序会自动上传这些文件。通过文件系统访问 API，我可以设置一个系统，在其中可以轮询文件的内容以查看它们是否已更改：

const handles = {
  translation:{handle:null,text:''},
  html:{handle:null,text:''},
  css:{handle:null,text:''}
};
//updateDirectory is triggered by clicking on a "select directory" button
async function updateDirectory(){
  const directoryHandle = await window.showDirectoryPicker();
  Object.keys(handles).forEach((key)=>handles[key] = null);//Clear the preexisting handles.
  //Get the handles for the individual files/directories
  if(handles.interval){
    clearInterval(handles.interval);
  }
  for await (let handle of directoryHandle.values()){
    if(handle.kind === 'file'){
      console.log('handle.name:',handle.name);
      if(handle.name === 'translation.json'){
        handles.translation.handle = handle;
      }else if(handle.name.endsWith('.html')){
        handles.html.handle = handle;
      }else if(handle.name.endsWith('.css')){
        handles.css.handle = handle;
      }
    }
  }
  startFilePoll();
}

function …

我需要读取使用新的 Web 文件系统访问 API 打开的文件夹的所有文件和目录。我能够读取目录，但不知道如何以优雅的方式继续递归

      try {
        const directoryHandle = await window.showDirectoryPicker()
        const files = []
        for await (let [name, handle] of directoryHandle) {
          const kind = handle.kind
          files.push({
            name,
            handle,
            kind,
          })
        }

使用文件系统访问 API，我将如何访问所选目录的文件夹中包含的文件？

document.querySelector('button').addEventListener('click', async () => {
  const dirHandle = await window.showDirectoryPicker();
  for await (const entry of dirHandle.values()) {
    if (entry.kind === "file"){
      const file = await entry.getFile();
      const text = await file.text();
      console.log(text);
    }
    if (entry.kind === "directory"){
      /* for file in this directory do something */ 
    }
  }
});

<button>Choose Directory</button>