DOMException:当前上下文中的用户代理或平台不允许该请求

DOMException: The request is not allowed by the user agent or the platform in the current context

尝试使用 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错误。

怎么回事?

刷新页面(或关闭应用程序的所有选项卡)时,浏览器不再具有访问该文件的权限。

有一个 queryPermission() 方法可用于 FileSystemHandle,可用于在尝试读取文件之前确定是否可以访问该文件。

示例来自 a helpful web.dev article

async function verifyPermission(fileHandle, readWrite) {
  const options = {};
  if (readWrite) {
    options.mode = 'readwrite';
  }
  // Check if permission was already granted. If so, return true.
  if ((await fileHandle.queryPermission(options)) === 'granted') {
    return true;
  }
  // Request permission. If the user grants permission, return true.
  if ((await fileHandle.requestPermission(options)) === 'granted') {
    return true;
  }
  // The user didn't grant permission, so return false.
  return false;
}

此函数将 return 一旦权限 === granted 为真,或者如果权限为 deniedprompt 则重新提示用户访问。