调用showOpenFilePicker时如何解决类方法触发的“需来自用户手势”报错

问题根因 #

你对this判定的猜测是错误的，该报错触发的核心是浏览器的用户激活（User Activation）安全策略：所有需要用户授权的敏感API（包括文件选择器、弹窗、全屏接口等），仅能在用户交互（点击、触摸、键盘输入等）触发的同步执行上下文、以及交互后未过期的微任务阶段调用，一旦执行栈跳出用户交互的触发链路，或中间插入了超过时效阈值的异步操作，用户激活状态就会直接失效。

直接写在事件闭包、调用普通函数时运行正常，是因为此时showOpenFilePicker的调用动作处于用户点击事件的同步执行栈内，满足安全要求；调用类方法报错，几乎都是因为你的类方法在调用文件选择器前插入了额外的异步操作，打断了执行栈，导致调用时用户激活状态已经过期。

解决方案 #

你不需要重建上下文，只要调整代码顺序保证文件选择器的调用时机符合要求即可：

• 核心原则：把showOpenFilePicker/showSaveFilePicker的调用放在类方法的最前端，调用前不要加任何await操作、异步回调逻辑，文件选择器调用完成后再执行其他异步处理逻辑。
  示例代码：

class FileTool {
  async selectFile() {
    // 优先同步调用文件选择器API，不要在这一行之前加任何await
    const [fileHandle] = await window.showOpenFilePicker({
      types: [{
        accept: { 'text/plain': ['.txt'] }
      }]
    })
    // 其他异步逻辑放在调用文件选择器之后
    const file = await fileHandle.getFile()
    return file
  }
}

// 事件监听里直接调用类方法，不要插入额外异步逻辑
document.querySelector('#uploadBtn').addEventListener('click', async () => {
  const tool = new FileTool()
  const targetFile = await tool.selectFile()
  // 后续文件处理逻辑
})

• 如果确实需要先做前置校验/数据拉取，把这部分逻辑提前到用户点击之前完成，不要等到用户点击之后再执行异步逻辑、再调用文件选择器。

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