JavaScript File System Access API在Mac上的适配问题及解决方案咨询

一、Mac系统的支持情况与特殊配置 #

• File System Access API完全支持Mac系统，但Safari的支持有明确版本要求：必须是Safari 15.4及以上的正式版本（技术预览版的支持可能存在差异）。
• 特殊配置要求：
  1. 必须是HTTPS上下文（你已经满足）；
  2. API调用必须由用户主动交互触发——比如点击按钮、选择菜单等操作，不能在页面加载、定时器、非用户触发的异步回调等场景下调用，否则Safari会直接拦截，甚至抛出方法不存在的错误；
  3. 部分Mac用户可能需要手动开启网站的文件访问权限：前往Safari > 设置 > 隐私 > 网站权限 > 文件与文件夹，确保你的网站被允许访问本地文件。

二、解决"window.showOpenFilePicker is not a function"报错的具体方案 #

1. 验证Safari版本准确性
   让用户确认Safari的实际版本：打开Safari，点击顶部菜单栏Safari > 关于Safari，确保版本号≥15.4。部分用户可能误将旧版本的技术预览版当作正式版使用。

2. 修正API触发时机
   确保showOpenFilePicker在用户交互的回调函数内执行，示例代码：

   // 绑定按钮点击事件触发文件选择
   document.querySelector('#pick-file-btn').addEventListener('click', async () => {
     try {
       const [fileHandle] = await window.showOpenFilePicker();
       // 后续处理文件逻辑
     } catch (err) {
       console.error('文件选择失败:', err);
     }
   });
   

3. 添加Safari兼容性前缀处理
   早期Safari支持该API时需要使用webkit前缀，可做兼容判断：

   const safeShowOpenFilePicker = window.showOpenFilePicker || window.webkitShowOpenFilePicker;
   
   if (!safeShowOpenFilePicker) {
     alert('当前浏览器不支持文件选择功能，请升级Safari至15.4及以上版本');
     return;
   }
   
   // 使用兼容后的方法
   const [fileHandle] = await safeShowOpenFilePicker();
   

4. 检查隐私权限设置
   引导用户检查Safari的文件访问权限：打开Safari设置 > 隐私 > 网站权限，找到你的网站域名，确认“文件与文件夹”权限已开启。

三、Mac上的替代本地文件/目录访问方式 #

如果上述方案无法解决问题，或者需要兼容更低版本的Safari，可以考虑以下替代方案：

1. 传统<input type="file">（基础文件读取） #

兼容性覆盖所有现代浏览器，适合基础文件读取场景：

<input type="file" id="file-input">
<script>
  document.getElementById('file-input').addEventListener('change', (e) => {
    const selectedFile = e.target.files[0];
    if (!selectedFile) return;
    
    // 读取文件内容示例
    const reader = new FileReader();
    reader.onload = (event) => {
      console.log('文件内容:', event.target.result);
    };
    reader.readAsText(selectedFile);
  });
</script>

2. 目录选择（基于<input>扩展） #

使用webkitdirectory属性支持目录选择，获取目录下所有文件：

<input type="file" id="dir-input" webkitdirectory>
<script>
  document.getElementById('dir-input').addEventListener('change', (e) => {
    const files = e.target.files;
    Array.from(files).forEach(file => {
      console.log('目录内文件:', file.name, file.path);
    });
  });
</script>

3. Electron桌面封装（高级需求） #

如果需要持久化文件访问、修改文件等高级功能，可以将Web应用封装为Electron应用，直接使用Node.js的fs模块实现跨平台的本地文件操作，完全规避浏览器API的限制。

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