[教程]showOpenFilePicker方法_实现了前端访问文件系统

发布于 2024-10-18 15:08:20

147

前言在之前我们需要打开并访问本地文件，只能通过file类型的表单input框来实现，比如：通过accept属性指定选择的文件类型，directory属性指定是否可以选择文件夹，capture属性指定前...

前言

在之前我们需要打开并访问本地文件，只能通过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 的后续代码
}