Window: showOpenFilePicker() 方法

options 可选

包含选项的对象，选项如下

excludeAcceptAllOption 可选

布尔值，默认为 false。默认情况下，选择器应包含一个选项，不允许应用任何文件类型过滤器（由下面的 type 选项启动）。将此选项设置为 true 意味着该选项不可用。

id 可选

通过指定 ID，浏览器可以记住不同 ID 的不同目录。如果相同的 ID 用于另一个选择器，则选择器将在相同的目录中打开。

multiple 可选

布尔值，默认为 false。设置为 true 时，可以选择多个文件。

startIn 可选

一个 FileSystemHandle 或一个知名目录（"desktop"、"documents"、"downloads"、"music"、"pictures" 或 "videos"），用于在其中打开对话框。

types 可选

一个Array，包含允许选择的文件类型。每个项目都是一个包含以下选项的对象

description 可选

允许的文件类型类别的可选描述。默认为空字符串。

accept

一个Object，其键设置为MIME 类型，值设置为一个Array，包含文件扩展名（请参见下面的示例）。

一个Promise，其完成处理程序接收一个Array，包含FileSystemFileHandle对象。

AbortError DOMException

如果用户在未进行选择的情况下关闭了提示，或者用户代理认为任何选定的文件过于敏感或危险，则会抛出此异常。

SecurityError DOMException

如果调用被同源策略阻止，或者未通过用户交互（例如按钮按下）进行调用，则会抛出此异常。

TypeError

如果无法处理接受类型，则会抛出此异常，这种情况可能发生在以下情况下：

• types 选项中任何项目中的 accept 选项的任何键字符串都无法解析有效的 MIME 类型。
• types 选项中任何项目中的 accept 选项的任何值字符串无效，例如，如果它没有以 . 开头，并且以 . 结尾，或者如果它包含任何无效的代码点，并且其长度大于 16。
• types 选项为空，并且 excludeAcceptAllOption 选项为 true。

需要短暂的用户激活。用户必须与页面或 UI 元素交互才能使用此功能。

在这里，我们设置选项对象，以便将其传递给方法。我们将允许选择图像文件类型，不允许选择所有文件类型，也不允许选择多个文件。

const pickerOpts = {
  types: [
    {
      description: "Images",
      accept: {
        "image/*": [".png", ".gif", ".jpeg", ".jpg"],
      },
    },
  ],
  excludeAcceptAllOption: true,
  multiple: false,
};

接下来，我们可以创建一个异步函数，该函数显示文件选择器并返回所选文件。

// create a reference for our file handle
let fileHandle;

async function getFile() {
  // open file picker, destructure the one element returned array
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // run code with our fileHandle
}

• 文件系统 API
• 文件系统访问 API：简化对本地文件的访问