使用File System WebAPI出现window.showOpenFilePicker is not a function报错如何解决

• 浏览器兼容性限制：showOpenFilePicker 属于 File System Access API 的能力，仅 Chromium 内核浏览器（Chrome 86+、Edge 86+、Opera 72+）提供支持，Firefox、Safari 及绝大多数移动端浏览器均未兼容该 API，不存在该属性自然会抛出类型错误。
• 安全上下文限制：该 API 仅允许在 HTTPS 协议环境或 localhost 本地调试环境下调用，使用 HTTP 协议的公网环境会被浏览器自动禁用该 API。
• 调用时机限制：必须由用户主动交互（如点击按钮、敲击键盘等操作）的事件回调中触发，页面加载后自动调用、异步回调深层调用等非用户交互栈的调用场景会被浏览器拦截。

• 先做可用性校验，提前兼容降级：调用 API 前先判断是否存在，不存在时走传统文件选择方案，避免直接报错：

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

async function getFile() {
  if ('showOpenFilePicker' in window) {
    // 原有 File System Access API 逻辑
    const [fileHandle] = await window.showOpenFilePicker(pickerOpts);
    // 后续处理逻辑
  } else {
    // 降级使用传统 input 方案
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*,.png,.gif,.jpeg,.jpg';
    input.onchange = e => {
      const file = e.target.files[0];
      // 后续处理逻辑和 fileHandle 读取文件的逻辑基本一致
    };
    input.click();
  }
}

• 确认运行环境符合要求：公网部署必须配置 HTTPS 证书，本地调试优先使用 localhost 访问，不要用本地IP地址访问服务。
• 确认浏览器符合要求：如果无需兼容全浏览器，仅在内部场景使用，可以统一要求使用86版本以上的Chrome/Edge浏览器，且不要手动开启禁用该 API 的浏览器实验配置。
• TypeScript 类型缺失处理：如果是TS项目报类型不存在的错误，可以手动扩展 Window 接口的类型定义：

declare global {
  interface Window {
    showOpenFilePicker: (options?: {
      types?: Array<{description: string, accept: Record<string, string[]>}>
      excludeAcceptAllOption?: boolean
      multiple?: boolean
    }) => Promise<FileSystemFileHandle[]>
  }
}

内容的提问来源于stack exchange，提问作者Lagu Longa