Chrome中使用webkitdirectory上传目录时如何移除警告提示？

首先得明确：这个警告是Chrome从66.0.3359.139版本开始引入的强制安全提示，目的是防止恶意网站未经许可批量抓取本地文件，所以没有直接的API或设置能完全禁用它——毕竟安全是浏览器的核心底线。

不过，我们有办法让同一站点不再重复弹出这个提示，具体可以试试这两种方案：

方案一：利用Chrome的站点权限记忆功能 #

当你第一次看到这个警告时，留意提示框右下角，会有一个类似*“记住我的选择”*的复选框（不同Chrome版本表述可能略有差异）。勾选它之后，Chrome就会记住你对该站点的信任授权，后续再用webkitdirectory上传目录时，就不会再弹出这个烦人的警告了。

这是官方推荐的最直接方法，既保留了安全防护，又解决了重复提示的问题。

方案二：改用File System Access API替代webkitdirectory #

如果想从代码层面彻底规避这个警告，可以考虑使用Chrome 86及以上版本支持的File System Access API。这个API允许用户更精细地授权网站访问本地文件/目录，而且授权后可以持久化保存，后续访问无需重复确认。

给你一段简单的示例代码参考：

// 请求用户选择目录并获取文件
async function pickAndReadDirectory() {
  try {
    // 弹出目录选择器
    const directoryHandle = await window.showDirectoryPicker();
    const selectedFiles = [];

    // 递归遍历目录中的所有文件
    async function traverseDir(handle) {
      for await (const entry of handle.values()) {
        if (entry.kind === 'file') {
          selectedFiles.push(await entry.getFile());
        } else if (entry.kind === 'directory') {
          await traverseDir(entry);
        }
      }
    }

    await traverseDir(directoryHandle);
    // 这里可以处理选中的文件，比如上传到服务器
    console.log('获取到的文件列表：', selectedFiles);
  } catch (error) {
    console.error('用户取消选择或发生错误：', error);
  }
}

使用这个API的优势在于：用户首次授权后，网站可以申请持久化权限，后续调用API就能直接访问之前授权的目录，不会再弹出类似警告，同时权限管理也更透明。

额外提醒 #

• 如果需要兼容Chrome 86以下的旧版本，那只能依赖方案一让用户手动勾选“记住选择”；
• File System Access API必须在HTTPS环境下使用（本地开发的localhost除外），这是浏览器的安全限制。

内容的提问来源于stack exchange，提问作者Jim.Fun