前言

在之前我们需要打开并访问本地文件，只能通过file类型的表单input框来实现，比如：

<input type="file">

通过accept属性指定选择的文件类型，directory属性指定是否可以选择文件夹，capture属性指定前置或后置摄像头。随着Web端的不断发展，出现了一个新的api，叫做 File System Access API，可以实现点击任意元素触发文件选择。

showOpenFilePicker方法

Window 接口的 showOpenFilePicker() 方法用于显示一个文件选择器，以允许用户选择一个或多个文件并返回这些文件的句柄。比如：

<button id="button">打开文件</button>

通过js事件监听，点击按钮出现文件选择：

button.addEventListener('click', function () {
    window.showOpenFilePicker();//打开文件
});

如果需要选择文件夹，则需要使用showDirectoryPicker()方法：

button.addEventListener('click', function () {
    window.showDirectoryPicker();//打开文件夹
});

两个API参数和作用类似，因此里只详细介绍showOpenFilePicker方法的使用。

参数：

window.showOpenFilePicker(options) 方法中是可以传参的，具体支持的参数如下：

options 可选,选项对象，包含以下属性：

multiple：布尔值，默认为 false。设为 true 时允许用户选择多个文件。

excludeAcceptAllOption：布尔值，默认为 false。默认情况下，文件选择器带有一个允许用户选择所有类型文件的过滤选项（展开于文件类型选项中）。设置此选项为 true 以使该过滤选项不可用。

types：表示允许选择的文件类型的 Array 数组，其中的元素为包含以下选项的对象：

• description可选，对此允许文件类型集合的描述。
• accept：Object 对象，带有键名为 MIME 类型、键值为包含文件扩展名的 Array 数组的键值对（参考下方的示例）。

返回值

一个 Promise 对象，会兑现一个包含 FileSystemFileHandle 对象的 Array 数组。 

异常 

AbortError 当用户直接关闭了文件选择器或选择的文件是不宜暴露给网站的敏感文件时将会抛出 AbortError。

showOpenFilePicker示例

在此处我们设置一个用于传递给方法的选项对象。我们将允许选择图片类型、不允许使用所有类型，也不能选择多个文件。

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

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

// 创建用于存放文件句柄的变量。
let fileHandle;

async function getFile() {
  // 打开文件选择器，解构返回的数组中的第一个元素
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // 操作 fileHandle 的后续代码
}

扩展

FileSystemFileHandle

FileSystemFileHandle提供了一些方法可以用来获取和操作文件

• getFile：返回一个Promise对象，用于获取文件；
• createSyncAccessHandle：返回一个FileSystemSyncAccessHandle对象，用于同步访问文件；
• createWritable：返回一个Promise对象，用于创建一个可写流，用于写入文件；

FileSystemDirectoryHandle

FileSystemDirectoryHandle对象是一个代表文件系统中的目录的对象，它同样提供了方法来获取和操作目录

• entries：返回一个AsyncIterable对象，用于获取目录中的所有文件和目录；
• keys：返回一个AsyncIterable对象，用于获取目录中的所有文件和目录的名称；
• values：返回一个AsyncIterable对象，用于获取目录中的所有文件和目录的FileSystemHandle对象；
• getFileHandle：返回一个Promise对象，用于获取目录中的文件；
• getDirectoryHandle：返回一个Promise对象，用于获取目录中的目录；
• removeEntry：返回一个Promise对象，用于删除目录中的文件或目录；
• resolve：返回一个Promise对象，用于获取目录中的文件或目录；

entries、keys、values这三个方法都是用来获取目录中的所有文件和目录的，它们返回的都是一个AsyncIterable对象，我们可以通过for await...of语法来遍历它。

兼容性

个人感觉这个api和file表单很类似，但对UI上更好设置，对于喜欢直接用js来实现代码的开发者更适合。但是目前这个API还处于实验阶段，大部分浏览器并不支持，

因此现在还不能直接使用。

浏览器兼容性

其他限制

1. 需要https环境，如果是本地localhost 不受此限制。
2. 不能在 iframe 内使用，因为被认为不安全

链接: https://www.fly63.com/article/detial/12515