Svelte应用中如何调用原生Web API，例如File System Access API

Svelte本身没有对浏览器原生Web API做任何封装或限制，你可以直接调用所有浏览器暴露的原生接口，只需要注意SSR场景下的环境判断问题即可，下面分场景说明具体用法：

1. 纯客户端渲染的Svelte项目 #

这类项目没有服务端渲染/预渲染逻辑，所有代码都在浏览器端运行，直接在需要的位置调用原生API即可，以window.showOpenFilePicker()为例，示例代码如下：

<script>
  async function handleSelectFile() {
    try {
      // 直接调用原生File System Access API
      const [fileHandle] = await window.showOpenFilePicker({
        types: [
          {
            description: '图片文件',
            accept: { 'image/*': ['.png', '.jpg', '.jpeg'] }
          }
        ],
        multiple: false
      });
      // 后续读取文件逻辑
      const file = await fileHandle.getFile();
      console.log('选中的文件：', file.name);
    } catch (e) {
      // 包含用户主动取消选择的场景，可按需处理
      console.error('文件选择失败：', e);
    }
  }
</script>

<button on:click={handleSelectFile}>
  选择图片文件
</button>

2. 带SSR/SSG的Svelte项目（如SvelteKit） #

这类项目在服务端构建/渲染阶段没有window、document等浏览器专属对象，直接顶层调用原生API会导致服务端报错，有两种常用的规避方案：

• 把API调用放到用户交互回调中：比如上面示例的点击事件，只会在浏览器端用户触发交互后执行，服务端渲染阶段不会运行，天然不会报错。
• 把API调用放到客户端专属的执行时机：比如使用onMount生命周期钩子，或者判断运行环境为浏览器后再执行，示例如下：

<script>
  import { onMount } from 'svelte';
  import { browser } from '$app/environment'; // SvelteKit提供的环境判断常量

  // 方案1：使用onMount，仅在客户端组件挂载后执行
  onMount(() => {
    if ('showOpenFilePicker' in window) {
      console.log('当前浏览器支持文件选择API');
    }
  });

  // 方案2：用browser常量判断环境后执行
  if (browser) {
    // 此处可以安全调用浏览器原生API
  }
</script>

注意事项 #

调用兼容性较差的新API前，建议先判断API是否存在，避免在不支持的浏览器中抛出异常：

if ('showOpenFilePicker' in window) {
  // 执行API调用逻辑
} else {
  // 降级方案，比如用传统的<input type="file">
  alert('当前浏览器不支持该功能，请升级浏览器后使用');
}

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