浏览器里的文件管理员：File System Access API 探秘之旅
想象一下，你辛辛苦苦用网页应用做了个精美的图，想保存到电脑里，结果浏览器弹出一个让你头疼的对话框：“你要把这个文件下载到哪里？叫什么名字？确定吗？…”。是不是觉得有点繁琐？又或者，你希望网页应用能直接读取你电脑里某个文件夹的照片，自动生成一个相册，但每次都要手动上传，简直是折磨。
这就是过去网页应用访问本地文件的痛点：安全性至上，权限小心翼翼。但这在某些场景下，确实不太方便。
幸好，W3C 的大佬们听到了大家的心声，推出了 File System Access API，一个让网页应用能够更安全、更流畅地访问本地文件和目录的秘密武器。它就像一个浏览器内置的文件管理员，在你允许的前提下，让网页应用拥有“有限”的权限，帮你管理你的文件。
告别“下载地狱”，拥抱丝滑体验
File System Access API 最直观的优势，就是告别了下载提示。假设你正在用一个在线图片编辑器，以前保存图片，每次都要经历选择路径、输入文件名、确认下载的流程。现在，有了这个 API，你只需要第一次授权，之后就可以直接保存，就像在本地应用里一样顺畅。
想象一下，你正在用一个在线音乐编辑器制作歌曲，以前保存项目文件，每次都要经历同样的“下载地狱”。现在，有了File System Access API，你可以直接选择一个文件夹作为你的项目目录，以后所有的修改和保存，都可以在这个目录下无缝进行。是不是感觉瞬间提升了一个效率等级？
权限管理：安全第一，用户至上
当然，浏览器厂商也不是傻子，不会随意放权给网页应用，让它们可以随意读取你的硬盘。File System Access API 的核心在于“权限管理”。
-
用户授权： 所有的访问请求，都需要用户明确授权。第一次访问某个文件或目录时，浏览器会弹出一个友好的对话框，询问你是否允许该网站访问这个文件或目录。你可以选择允许，也可以选择拒绝。
-
作用域限定： 即使你授权了，网页应用也只能访问你授权的文件或目录，以及它们下面的子目录。它不能随意访问你电脑的其他地方，除非你再次授权。
-
可撤销权限： 如果你觉得某个网站不靠谱，或者不再需要它访问你的文件了，你可以随时撤销授权。就像你随时可以取消某个手机应用的定位权限一样。
这种“用户授权 + 作用域限定 + 可撤销权限”的机制，保证了用户的安全和隐私，同时又提供了足够的灵活性。
File System Access API 的核心概念
要理解 File System Access API，我们需要了解几个核心的概念：
-
FileSystemHandle： 这是所有文件和目录的基类。它代表了文件系统中的一个条目，可以是文件，也可以是目录。你可以把它想象成一个通用的“文件系统句柄”。 -
FileSystemFileHandle： 这是FileSystemHandle的子类，代表一个文件。你可以通过它来读取和写入文件内容。 -
FileSystemDirectoryHandle： 这是FileSystemHandle的子类，代表一个目录。你可以通过它来访问目录下的文件和子目录。 -
showOpenFilePicker()： 这是一个全局函数，用于显示一个文件选择器，让用户选择一个或多个文件。它返回一个Promise，resolve 的结果是一个FileSystemFileHandle数组。 -
showSaveFilePicker()： 这是一个全局函数，用于显示一个保存文件对话框，让用户选择一个文件保存路径。它返回一个Promise，resolve 的结果是一个FileSystemFileHandle。 -
showDirectoryPicker()： 这是一个全局函数，用于显示一个目录选择器，让用户选择一个目录。它返回一个Promise，resolve 的结果是一个FileSystemDirectoryHandle。
有了这些概念，我们就可以开始编写代码了。
实战演练：读取本地文件
让我们来做一个简单的例子，读取本地一个文本文件的内容，并显示在网页上。
async function readFile() {
try {
// 显示文件选择器，让用户选择一个文件
const [fileHandle] = await window.showOpenFilePicker();
// 获取文件对象
const file = await fileHandle.getFile();
// 读取文件内容
const contents = await file.text();
// 显示文件内容
document.getElementById('fileContent').textContent = contents;
} catch (err) {
// 如果用户取消选择，或者发生其他错误，会抛出异常
console.error(err);
}
}这段代码首先调用 showOpenFilePicker() 函数，显示一个文件选择器。用户选择一个文件后，showOpenFilePicker() 函数会返回一个 FileSystemFileHandle 对象。
然后，我们调用 fileHandle.getFile() 方法，获取一个 File 对象。这个 File 对象和我们在 <input type="file"> 元素中获取的 File 对象是一样的，我们可以使用 file.text() 方法读取文件内容。
最后，我们将文件内容显示在网页上。
是不是很简单？
更进一步：写入本地文件
除了读取文件，我们还可以写入文件。
async function writeFile(content) {
try {
// 显示保存文件对话框，让用户选择一个文件保存路径
const fileHandle = await window.showSaveFilePicker();
// 创建一个可写流
const writable = await fileHandle.createWritable();
// 写入内容
await writable.write(content);
// 关闭流
await writable.close();
} catch (err) {
// 如果用户取消选择，或者发生其他错误，会抛出异常
console.error(err);
}
}这段代码首先调用 showSaveFilePicker() 函数，显示一个保存文件对话框。用户选择一个文件保存路径后，showSaveFilePicker() 函数会返回一个 FileSystemFileHandle 对象。
然后，我们调用 fileHandle.createWritable() 方法，创建一个可写流。我们可以使用 writable.write() 方法写入内容，最后调用 writable.close() 方法关闭流。
目录操作：遍历、创建、删除
File System Access API 不仅可以操作文件，还可以操作目录。你可以遍历目录下的文件和子目录，创建新的目录，删除目录等。
async function listFiles(directoryHandle) {
// 遍历目录下的文件和子目录
for await (const entry of directoryHandle.values()) {
console.log(entry.name, entry.kind); // entry.kind 可以是 "file" 或 "directory"
}
}
async function createDirectory(directoryHandle, directoryName) {
// 创建一个新的目录
await directoryHandle.getDirectoryHandle(directoryName, { create: true });
}
async function deleteEntry(directoryHandle, entryName) {
// 删除一个文件或目录
await directoryHandle.removeEntry(entryName);
}这些操作都需要用户授权，并且受到作用域的限制，所以非常安全。
应用场景：无限可能
File System Access API 开启了网页应用访问本地文件的新篇章，它带来了无限的可能。
-
本地文件编辑器： 想象一下，你可以在浏览器里直接编辑本地的 Markdown 文件、代码文件，就像使用 VS Code 一样。
-
图片和视频处理： 你可以在浏览器里直接对本地的图片和视频进行编辑、裁剪、压缩，而无需上传到服务器。
-
游戏开发： 你可以使用 File System Access API 来加载本地的游戏资源，例如地图、模型、贴图等。
-
数据分析： 你可以使用 File System Access API 来读取本地的 CSV 文件、Excel 文件，进行数据分析和可视化。
-
云同步： 你可以开发一个网页应用，将本地文件同步到云端，或者从云端同步到本地。
兼容性：任重道远
虽然 File System Access API 非常强大，但是它的兼容性还不够好。目前，只有 Chrome 和 Edge 浏览器完全支持这个 API。Firefox 和 Safari 还在积极开发中。
所以，在使用 File System Access API 时，你需要进行兼容性判断，并提供备选方案。
if ('showOpenFilePicker' in window) {
// 支持 File System Access API
// 使用 File System Access API 的代码
} else {
// 不支持 File System Access API
// 使用传统的 <input type="file"> 元素
}总结：未来可期
File System Access API 是一个非常有前景的 API，它让网页应用拥有了更强大的能力，可以更好地与本地文件系统进行交互。虽然它的兼容性还不够好，但是随着浏览器的不断升级，相信它会越来越普及。
未来，我们可以期待更多的网页应用能够利用 File System Access API，为我们带来更便捷、更高效的用户体验。
希望这篇文章能够让你对 File System Access API 有一个更深入的了解。下次当你看到一个网页应用能够直接访问你的本地文件时，不要再感到惊讶，因为这已经是未来的趋势。