掌握File System Access API：实现文件选择器目录持久化指南

本文深入探讨了在Web应用程序中利用File System Access API实现文件选择器目录持久化的方法。针对无法直接指定任意本地驱动器路径（如`D:\`）作为默认起始目录的安全限制，文章详细介绍了如何通过`showOpenFilePicker`和`showSaveFilePicker`方法的`id`属性或`startIn`属性结合`FileSystemHandle`对象，来记忆并重用用户上次选择的目录，从而优化用户体验。

引言：文件选择器与安全限制

在Web应用程序中，文件上传和下载是常见功能。开发者有时会希望能够指定文件选择器（File Picker）默认打开的目录，例如直接指向特定的本地驱动器（如D:\）。然而，出于浏览器安全模型的设计，Web页面无法直接访问或指定本地文件系统的任意路径。传统的元素不提供设置默认目录的功能，而较新的File System Access API虽然提供了更强大的文件系统交互能力，但对于初始目录的设定也存在特定的限制。

当尝试在showOpenFilePicker方法的startIn属性中直接设置如D:\这样的绝对路径时，浏览器会抛出TypeError，提示该值不是WellKnownDirectory枚举类型中的有效值。这明确指出startIn属性仅接受预定义的“已知目录”（如'documents'、'downloads'、'pictures'等）或一个FileSystemHandle对象。

理解showOpenFilePicker的startIn属性

showOpenFilePicker方法允许通过startIn属性来建议文件选择器打开的初始目录。然而，此属性并非用于指定任意文件系统路径，其接受的值类型有限：

1. WellKnownDirectory枚举值：例如'documents'、'downloads'、'pictures'、'videos'、'music'或'desktop'。这些是操作系统中预设的特殊目录。

   async function openFileInDocuments() {
       const [fileHandle] = await window.showOpenFilePicker({
           startIn: 'documents'
       });
       // ... 处理文件句柄
   }

   登录后复制

2. FileSystemHandle对象：如果你的应用程序已经通过之前的操作获得了某个目录或文件的FileSystemHandle，你可以将其作为startIn的值，文件选择器将尝试在该句柄所代表的目录下打开。

实现文件选择器目录持久化策略

虽然无法直接指定任意驱动器路径，但File System Access API提供了两种机制，可以在用户首次选择目录后，在后续的文件选择操作中“记住”并重用该目录，从而提升用户体验。

策略一：利用id属性实现目录记忆

showOpenFilePicker和showSaveFilePicker方法都支持一个可选的id属性。当你在多次调用这些方法时使用相同的id值，浏览器会尝试记住用户上次使用该id时所选择的目录，并在后续调用中将文件选择器默认打开到该目录。

工作原理：

1. 首次调用：当首次使用某个id调用showOpenFilePicker时，文件选择器会打开默认目录（或startIn指定的WellKnownDirectory）。用户需要手动导航到他们希望的目录（例如D:\foo\），并选择文件。
2. 后续调用：再次使用相同的id调用showOpenFilePicker或showSaveFilePicker时，浏览器会尝试将文件选择器直接打开到上次用户为该id选择的目录。

示例代码：

标签： 操作系统 浏览器 app access ai pdf win web应用程序