File System Access API 让浏览器拥有操作本地文件的能力

在早期我们经常听到这样的说法：浏览器是一个沙盒，它不允许我们操作本地文件，但是现在这个说法已经不再适用了，因为我们可以使用 File System Access API 来实现这个功能。

什么是 File System Access API

File System Access API 是一项 Web API，允许 Web 应用程序从用户设备的本地文件系统中读取和写入文件。

它提供了一种简单且安全的方法，让用户在不离开 Web 应用的情况下，从本地文件系统中操作文件。

这项 API 为 Web 应用程序提供了更多的灵活性和功能，使其更接近于本地应用程序的体验。

File System Access API 遵循同源策略，只允许 Web 应用程序在具有相同源的文件系统上进行操作。

当用户使用该 API 时，会提示用户授权应用程序访问他们的文件系统。

如果用户授权，则应用程序可以使用该 API 访问用户选择的文件和目录。

使用 File System Access API 可以访问本地文件系统，从而实现一些有用的功能，例如：

• 将文件从本地文件系统上传到 Web 应用程序；
• 将 Web 应用程序中的数据写入到本地文件系统中；
• 在用户的本地文件系统上创建、重命名和删除文件；
• 读取本地文件系统上的文件内容。

如何使用 File System Access API

我不是很喜欢概念性的东西，上面的内容是网上借鉴的（文化人），我更喜欢直接上代码，所以我们直接上代码。

选择文件

首先我们来看看如何选择文件，这个功能是 File System Access API 中最基础的功能，我们可以通过 showOpenFilePicker 方法来实现。

const fileHandle = await window.showOpenFilePicker();
console.log(fileHandle); 

可以看到我们这里使用了async/await语法，这是因为showOpenFilePicker异步方法，它会返回一个Promise对象，我们可以通过await来等待它的结果。

showOpenFilePicker方法会返回一个FileHandle对象，我们可以通过它来获取文件的信息。

我们来看看它最后返回的结果：

可以看到的是最后的结果是一个数组，这是因为我们可以选择多个文件；

而这个数组的每一项都是一个FileSystemFileHandle对象，我们可以通过它来获取和操作文件。

FileSystemFileHandle

FileSystemFileHandle对象是一个代表文件的对象，它提供了一些方法来获取和操作文件。

FileSystemFileHandle提供了一些方法来获取和操作文件，例如：

• getFile：返回一个Promise对象，用于获取文件；
• createSyncAccessHandle：返回一个FileSystemSyncAccessHandle对象，用于同步访问文件；
• createWritable：返回一个Promise对象，用于创建一个可写流，用于写入文件；

我们来看看如何使用getFile方法来获取文件。