使用window.showDirectoryPicker()如何避免先后弹出读取、编辑两个授权提示

解决方案 #

你设想的传参配置本身就是File System Access API原生支持的，直接给showDirectoryPicker传入mode: 'readwrite'配置即可，无需分开申请权限，修改后的代码如下：

const dirHandle = await window.showDirectoryPicker({
  mode: 'readwrite'
});

// 兼容旧版本的可选校验逻辑，不需要重复申请权限
if ((await dirHandle.queryPermission({ mode: 'readwrite' })) !== 'granted') {
  await dirHandle.requestPermission({ mode: 'readwrite' });
}

原理解释 #

• 你之前的写法里showDirectoryPicker默认使用mode: 'read'配置，所以调用时会先弹出读取权限授权框，之后主动申请读写权限时又触发了第二次授权框。
• 直接在调用文件夹选择器时指定mode: 'readwrite'，浏览器只会弹出一次合并了读写权限的授权提示，和拖拽场景的交互逻辑完全一致。
• 附加的权限查询逻辑可以兼容不支持showDirectoryPicker传mode参数的旧版本Chrome，避免重复触发授权弹窗。

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