Google Chrome 107中Window.showDirectoryPicker()无法正常工作

云上老周

2026-8-14

解决Window.showDirectoryPicker()不弹出目录选择窗口的问题

针对你遇到的Chrome 107+环境下showDirectoryPicker()无响应的问题，以下是常见原因及解决办法：

1. 必须在安全上下文运行

showDirectoryPicker()属于文件系统访问API，仅支持HTTPS协议、localhost或127.0.0.1这类安全上下文。如果你的页面是通过普通HTTP（比如http://192.168.x.x）打开的，API会直接失效，控制台会抛出安全相关的错误。

解决：

改用localhost或127.0.0.1启动本地服务；
部署到HTTPS环境下测试。

2. 检查浏览器权限设置

Chrome可能默认限制了网站访问文件系统的权限：

打开Chrome设置 → 隐私和安全 → 网站设置 → 文件和文件夹；
确保“允许网站请求访问文件和文件夹”处于开启状态；
检查当前网站是否被列入“不允许”列表，如有则移除。

3. 确认用户交互上下文未丢失

虽然你的代码绑定了按钮click事件，但如果在异步操作中嵌套多层回调，可能会脱离用户触发的上下文。确保await window.showDirectoryPicker()直接在click事件的回调函数中执行，不要被其他非用户触发的异步逻辑包裹。

你可以给代码添加错误捕获，方便排查问题：

const butDir = document.getElementById('butDirectory');
butDir.addEventListener('click', async () => {
  try {
    const dirHandle = await window.showDirectoryPicker();
    console.log('目录已选择:', dirHandle.name);
    for await (const entry of dirHandle.values()) {
      console.log(entry.kind, entry.name);
    }
  } catch (err) {
    console.error('操作取消或出错:', err);
  }
});