Web 应用程序的文件系统写入能力

介绍

NodeJS 之前，JS 操作文件只能通过 HTML <input type="file"> 元素或 XMLHttpRequest（或之后的 fetch），来对本地文件进行一些浏览和上传操作。NodeJS 给予了 JS 操作系统底层 API 的能力，但这只能局限在 NodeJS 项目中。

File System Access API 允许直接读取、写入或保存对用户设备上的文件和文件夹的更改。此 API 使开发人员能够构建功能强大的 Web 应用程序，例如 IDE、文本编辑器、图片编辑器和视频编辑器等等。

从 Chrome 86 开始支持 File System Access API，目前只有基于 Chromium 系列的浏览器全面支持，Safari 部分支持（支持读取，不支持写入和保存），而 Firefox 未支持。

下面我们从制作一个网页文本编辑器，来演示文件系统访问 API。

读取文件

大多数与文件和目录的交互都是通过句柄（FileSystemHandle 的子类）完成的。获取句柄的方法通常是 window.showOpenFilePicker 和 window.showDirectoryPicker，调用必须在安全上下文中完成，并且必须从用户手势（事件触发）中调用。

let fileHandle;
butOpenFile.addEventListener('click', async () => {[fileHandle] = await window.showOpenFilePicker();
}); 

保留对文件句柄的引用很有帮助，以便以后可以使用。例如，需要它来保存对文件的更改，或执行任何其他文件操作。

获取了文件的句柄，您可以获取文件的属性，或访问文件本身。调用 handle.getFile() 将返回一个 File 对象，然后我们可以通过 slice(), stream(), text(), 或 arrayBuffer() 等方法对其处理。