JS `Native File System API` (Node.js/Deno)：操作本地文件系统的原生接口

各位观众，大家好！我是今天的主讲人，很高兴能和大家一起聊聊JavaScript世界里一个相当“接地气”的话题：Native File System API。啥叫“接地气”？就是说，这玩意儿直接跟你的硬盘打交道，能让你用JS代码像操作自己电脑上的文件一样方便。

开场白：JS不再只是网页的玩具

咱们以前说起JavaScript，总觉得它就是个在浏览器里跑跑动画，验证一下表单的小弟。想访问本地文件？那是不可能的！顶多让你上传个文件，再给你个下载链接。但是，时代变了！Node.js让JS跑到了服务器端，Deno又试图解决Node.js的一些问题。它们都赋予了JS操作本地文件的能力。而Native File System API，则更进一步，试图把这种能力标准化，让浏览器端的JS也能直接操作用户的文件系统（当然，是在用户授权的前提下）。

Native File System API：是福音还是潘多拉魔盒？

想想看，以前你想做一个本地文本编辑器，或者一个图片处理工具，用JS是多么的费劲！现在有了Native File System API，理论上，你就可以用纯JS来搞定这些事情。听起来是不是很激动？

但是，任何强大的工具都有两面性。直接操作文件系统，意味着安全风险也会大大增加。如果你的网站被黑客攻破，他们就可以利用这个API来窃取用户的文件，甚至破坏用户的系统。所以，Native File System API的使用必须非常谨慎，必须建立在严格的安全机制之上。

Native File System API的核心概念

在深入代码之前，我们先来了解一下Native File System API的一些核心概念。这些概念就像乐高积木，只有理解了它们，才能搭建出你想要的文件操作功能。

• FileSystemHandle： 这是所有文件系统入口点的基类。它表示一个文件或目录的句柄。你可以把它想象成一个指向文件或文件夹的指针。
• FileSystemFileHandle： 继承自FileSystemHandle，表示一个文件的句柄。有了它，你就可以读取、写入文件内容。
• FileSystemDirectoryHandle： 继承自FileSystemHandle，表示一个目录的句柄。有了它，你就可以创建、删除、列出目录中的文件和子目录。
• FileSystemWritableFileStream： 提供了一种写入文件内容的流式方式。它可以让你以块为单位，逐步将数据写入文件，而不需要一次性加载整个文件到内存中。
• showOpenFilePicker()： 这个函数会弹出一个文件选择对话框，让用户选择一个或多个文件。它返回一个Promise，resolve的值是一个FileSystemFileHandle数组。
• showSaveFilePicker()： 这个函数会弹出一个另存为对话框，让用户选择一个保存文件的位置和文件名。它返回一个Promise，resolve的值是一个FileSystemFileHandle。
• showDirectoryPicker()： 这个函数会弹出一个目录选择对话框，让用户选择一个目录。它返回一个Promise，resolve的值是一个FileSystemDirectoryHandle。

代码实战：一步一步操作文件

好了，概念讲完了，现在咱们来点实际的。下面，我将通过一些代码示例，来演示如何使用Native File System API进行文件操作。

1. 读取文件内容

首先，我们需要让用户选择一个文件。这里，我们使用showOpenFilePicker()函数：

async function readFile() {
  try {
    const [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();
    const contents = await file.text(); // 读取文件内容为文本
    console.log(contents);
  } catch (err) {
    console.error("读取文件失败:", err);
  }
}

// 调用readFile函数
// readFile();

这段代码做了什么？

• window.showOpenFilePicker()：弹出一个文件选择对话框，等待用户选择文件。注意await关键字，它表示代码会暂停执行，直到用户选择了文件。
• [fileHandle] = await window.showOpenFilePicker(): 解构赋值，只取返回数组的第一个元素(FileSystemFileHandle)
• fileHandle.getFile()：获取File对象，它包含了文件的元数据（例如文件名、大小、类型）和文件内容。
• file.text()：以文本形式读取文件内容。还有file.arrayBuffer()和file.stream()等方法，可以分别读取文件内容为ArrayBuffer和ReadableStream。
• console.log(contents)：将文件内容打印到控制台。
• try...catch：用于捕获可能发生的错误，例如用户取消了文件选择对话框。

2. 写入文件内容

接下来，我们演示如何将数据写入文件。这里，我们使用showSaveFilePicker()函数：

async function writeFile(data) {
  try {
    const fileHandle = await window.showSaveFilePicker();
    const writable = await fileHandle.createWritable();
    await writable.write(data);
    await writable.close();
    console.log("文件写入成功!");
  } catch (err) {
    console.error("文件写入失败:", err);
  }
}

// 调用writeFile函数
// writeFile("Hello, Native File System API!");

这段代码做了什么？

• window.showSaveFilePicker()：弹出一个另存为对话框，等待用户选择保存文件的位置和文件名。
• fileHandle.createWritable()：创建一个FileSystemWritableFileStream对象，用于写入文件内容。
• writable.write(data)：将数据写入文件。这里的data可以是字符串、ArrayBuffer或Blob对象。
• writable.close()：关闭文件流，确保所有数据都写入到文件中。
• console.log("文件写入成功!")：提示用户文件写入成功。
• try...catch：用于捕获可能发生的错误，例如用户取消了另存为对话框。

3. 创建和删除目录

现在，我们来看看如何创建和删除目录：

async function createDirectory(directoryName) {
  try {
    const dirHandle = await window.showDirectoryPicker();
    await dirHandle.getDirectoryHandle(directoryName, { create: true });
    console.log(`目录 "${directoryName}" 创建成功!`);
  } catch (err) {
    console.error(`创建目录 "${directoryName}" 失败:`, err);
  }
}

async function deleteDirectory(directoryName) {
  try {
    const dirHandle = await window.showDirectoryPicker();
    await dirHandle.removeEntry(directoryName, { recursive: true });
    console.log(`目录 "${directoryName}" 删除成功!`);
  } catch (err) {
    console.error(`删除目录 "${directoryName}" 失败:`, err);
  }
}

// 调用createDirectory和deleteDirectory函数
// createDirectory("mydir");
// deleteDirectory("mydir");

这段代码做了什么？

• window.showDirectoryPicker()：弹出一个目录选择对话框，等待用户选择一个目录。
• dirHandle.getDirectoryHandle(directoryName, { create: true })：在选定的目录下创建一个名为directoryName的子目录。{ create: true }表示如果目录不存在，则创建它。
• dirHandle.removeEntry(directoryName, { recursive: true })：删除选定目录下的名为directoryName的子目录。{ recursive: true }表示如果目录不为空，则递归删除其中的所有文件和子目录。

4. 列出目录中的文件和子目录

最后，我们来看看如何列出目录中的文件和子目录：

async function listDirectory() {
  try {
    const dirHandle = await window.showDirectoryPicker();
    for await (const entry of dirHandle.values()) {
      console.log(entry.name, entry.kind); // entry.kind 可以是 "file" 或 "directory"
    }
  } catch (err) {
    console.error("列出目录内容失败:", err);
  }
}

// 调用listDirectory函数
// listDirectory();

这段代码做了什么？

• window.showDirectoryPicker()：弹出一个目录选择对话框，等待用户选择一个目录。
• dirHandle.values()：返回一个异步迭代器，用于遍历目录中的所有文件和子目录。
• for await (const entry of dirHandle.values())：使用for await...of循环来异步遍历目录中的每个条目。
• console.log(entry.name, entry.kind)：将每个条目的名称和类型打印到控制台。entry.kind可以是"file"或"directory"，分别表示文件和子目录。

安全注意事项：必须重视！

前面我说过，Native File System API是一把双刃剑。在享受它带来的便利的同时，我们必须时刻警惕安全风险。以下是一些重要的安全注意事项：

• 用户授权： 任何文件操作都必须经过用户的明确授权。不要试图绕过用户的授权，或者诱导用户授予不必要的权限。
• 来源验证： 确保你的网站的来源是可信的。不要从不可信的来源加载代码，或者运行不可信的代码。
• 输入验证： 对所有用户输入进行严格的验证。不要相信任何用户输入的数据，防止恶意用户利用输入来执行恶意操作。
• 最小权限原则： 只请求你需要的权限。不要请求过多的权限，以免给攻击者留下可乘之机。
• 内容安全策略 (CSP)： 使用CSP来限制你的网站可以加载的资源，从而防止跨站脚本攻击 (XSS)。
• 定期更新： 保持你的浏览器和操作系统更新到最新版本，以便及时修复已知的安全漏洞。

兼容性：别高兴太早

虽然Native File System API很强大，但是它的兼容性还不是很好。目前，只有Chrome和Edge等少数浏览器支持它。这意味着，如果你想使用这个API，你必须考虑到兼容性问题。

你可以使用以下代码来检测浏览器是否支持Native File System API：

if ('showOpenFilePicker' in window) {
  console.log("Native File System API is supported!");
} else {
  console.log("Native File System API is not supported!");
}

如果浏览器不支持Native File System API，你可以考虑使用一些polyfill或者其他的替代方案，例如：

• input type="file"： 这是最传统的上传文件的方式。虽然它不能让你直接操作文件系统，但是它可以让你读取文件内容。
• IndexedDB： 这是一个浏览器端的数据库，可以让你存储大量的数据，包括文件内容。
• 第三方库： 有一些第三方库可以提供文件操作的功能，例如FileSaver.js和jszip。

总结：未来可期，但路漫漫其修远兮

Native File System API是一个非常有前景的技术，它为JavaScript开发者打开了一扇通往本地文件系统的大门。但是，它也带来了一些新的安全风险和兼容性问题。我们需要在享受它带来的便利的同时，时刻警惕这些风险和问题。

总的来说，Native File System API的未来是值得期待的，但是它的发展还需要时间。我们需要不断地学习、实践和探索，才能充分发挥它的潜力。

表格总结：核心API一览

为了方便大家查阅，我把刚才提到的核心API整理成一个表格：

API	描述	返回值
showOpenFilePicker()	弹出文件选择对话框，允许用户选择一个或多个文件。	Promise<FileSystemFileHandle[]>
showSaveFilePicker()	弹出另存为对话框，允许用户选择一个保存文件的位置和文件名。	Promise<FileSystemFileHandle>
showDirectoryPicker()	弹出目录选择对话框，允许用户选择一个目录。	Promise<FileSystemDirectoryHandle>
FileSystemFileHandle.getFile()	获取File对象，包含文件的元数据和内容。	Promise<File>
FileSystemFileHandle.createWritable()	创建一个FileSystemWritableFileStream对象，用于写入文件内容。	Promise<FileSystemWritableFileStream>
FileSystemWritableFileStream.write()	将数据写入文件。	Promise<void>
FileSystemWritableFileStream.close()	关闭文件流，确保所有数据都写入到文件中。	Promise<void>
FileSystemDirectoryHandle.getDirectoryHandle()	获取指定名称的子目录的句柄。如果目录不存在，可以创建它。	Promise<FileSystemDirectoryHandle>
FileSystemDirectoryHandle.getFileHandle()	获取指定名称的文件的句柄。如果文件不存在，可以创建它。	Promise<FileSystemFileHandle>
FileSystemDirectoryHandle.removeEntry()	删除指定名称的文件或子目录。	Promise<void>
FileSystemDirectoryHandle.values()	返回一个异步迭代器，用于遍历目录中的所有文件和子目录。	AsyncIterableIterator<FileSystemHandle>

结束语：一起探索文件系统的奥秘

好了，今天的讲座就到这里。希望通过今天的讲解，大家对Native File System API有了一个初步的了解。这是一个充满挑战和机遇的新领域，让我们一起努力，探索文件系统的奥秘，创造出更多有趣和实用的应用！谢谢大家！