window.showDirectoryPicker()报错file picker already active的解决方案求助

这个问题是因为浏览器判定存在活跃的文件选择器实例，导致重复调用被拦截。核心解决思路是添加状态锁，避免重复触发选择器请求：

修改后的代码 #

const btn = document.getElementById('btn');
const pre = document.getElementById('pre');
let isPickerActive = false; // 标记是否有活跃的选择器

btn.addEventListener('click', async (e) => {
  // 如果已有活跃选择器，直接返回
  if (isPickerActive) return;
  isPickerActive = true;

  try {
      const dirHandle = await window.showDirectoryPicker();
      pre.innerHTML = `${dirHandle.name}`;
  } 
  catch (error) {       
      console.log(error);      
  } finally {
      // 无论成功/失败/取消，都重置状态锁
      isPickerActive = false;
  }
});

原理说明 #

• 用isPickerActive变量标记当前是否有正在进行的选择器请求，点击按钮时先检查这个状态，避免重复触发。
• 在finally块中重置状态，确保无论用户选择目录、取消窗口还是出现错误，状态都会被正确恢复，下次点击按钮能正常唤起选择器。

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