Web应用如何访问本地文件？VS Code Web实现方式解析

VS Code Web 实现本地文件读写、重命名、删除等操作的核心技术是浏览器原生的 File System Access API，这也是它无需依赖传统<input type="file" />标签的原因。

核心实现流程 #

• 目录授权获取：当用户选择"打开本地文件夹"时，VS Code Web 调用showDirectoryPicker()方法发起授权请求。用户确认后，应用会拿到对应目录的FileSystemDirectoryHandle对象，通过这个对象可以遍历目录内的所有文件与子目录。
• 具体文件操作：
  • 读取文件：通过FileSystemFileHandle实例的getFile()方法获取文件对象，再用text()或arrayBuffer()读取文件内容。
  • 修改/写入文件：调用FileSystemFileHandle的createWritable()方法创建可写入流，直接向本地文件写入更新后的内容。
  • 重命名/删除：借助FileSystemDirectoryHandle的move()（重命名文件/目录）和removeEntry()（删除文件/目录）方法，完成对应的操作。
• 持久化授权：该API支持持久化存储用户的授权信息，用户下次打开应用时，无需重复授权即可访问之前允许的目录，这一特性依赖浏览器的本地存储机制保存句柄数据。

补充说明 #

除了File System Access API，VS Code Web 还结合Service Worker实现离线缓存与文件状态同步，但核心的本地文件交互能力完全基于前者。目前该API已被Chrome、Edge等主流Chromium内核浏览器支持，兼容性良好。

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