window.showOpenFilePicker 唤起弹窗，获取本地文件

背景

以前写代码的时候，获取本地文件，使用的是input type=file,但是在继续学习前端的时候发现了window.showOpenFilePicker(options) 这是一个不错的选择。

实验性:  这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

代码

export default async function showOpenFilePicker(
  options
) {
  try {
    return await window.showOpenFilePicker(options);
  } catch (err) {
    if (err.name === "AbortError") {
      return [];
    }
    throw err;
  }
}

参数

• options 可选

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

  • multiple

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

  • excludeAcceptAllOption

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

  • types

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

    • description

      可选，对此允许文件类型集合的描述。

    • accept

      Object 对象，带有键名为 MIME 类型、键值为包含文件扩展名的 Array 数组的键值对（参考下方的示例）。

返回值

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

使用

const [fileHandle] = await showOpenFilePicker({
        types: [
            {
              description: "Images",
              accept: {
                "image/*": [".png", ".gif", ".jpeg", ".jpg"],
              },
            },
          ],
          excludeAcceptAllOption: true,
          multiple: false,
});
if (!fileHandle) {
  return;
}
const file = await fileHandle.getFile();