这是我参与更文挑战的第 19 天，活动详情查看：更文挑战
能够选择用户本地设备上的文件并与之交互是 Web 最常用的功能之一。在这之前，只能将文件整体上传之后才能进行操作。直到 File System Access API 出现，有了新的转机。
什么是 File System Access API
File System Access API 允许用户选择文件并将其上传到服务器，例如上传照片。但是，它还允许网站阅读和操作它们，而无需将数据传输到整个网络。
请注意：在搜索时可能会发现一个叫 File System API 的东西，这个现在已经不推荐使用。新的提案可以在 WICG 看到，更新时间在 2021.6.4。
提案详细内容，请看 File System Access API
它能做到什么？
- 应用可与用户本地设备上的文件进行交互
- 直接读写文件、创建文件夹，但不需要将文件整个上传
- 可打开目录并列举内容
浏览器支持程度
- Google 浏览器支持，基于 Chromium 内核的浏览器均支持。
- 不支持的浏览器，可以使用 Browser-FS-Access 做 polyfill
示例
有一个 文本编辑器 的示例，源码在 Github 。通过这个示例，可以大体了解 File System Access API 的使用方法。
如何进行
事前准备
首先，File System Access API 只允许在安全环境下调用。配置安全环境请参考翻译文章 如何在你的本地开发环境中使用 HTTPS。部分 API 调用时需要用户手动触发。
打开一个文件
调用 window.showOpenFilePicker() 方法，可以打开文件选择对话框选择单个文件，类似下图这种：
window.showOpenFilePicker 方法支持传入可选参数 option，这些参数可以影响文件选择对话框的行为，比如指定文件类型、可多选文件之类的。
这个方法调用需要用户手动触发
let fileHandle;
butOpenFile.addEventListener('click', async () => {
// Destructure the one-element array.
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
选择文件之后，API 会返回一组文件操作 handle，其中包含与文件交互所需的属性和方法，例如读写文件。
从文件系统中读取文件
上一步你获取了文件操作 handle，可以借此获取文件属性，或访问文件本身。
现在，我只需要读取文件内容。调用 getFile 方法可获得文件对象，其中包含一个 blob。要读取 blob 数据，可以使用下列方法之一：stream()、text()、arrayBuffer()、slice()。
const file = await fileHandle.getFile();
const contents = await file.text();
