阐述 File System Access API 如何在浏览器中实现更安全的本地文件系统读写，并讨论其权限模型和用户交互流。

大家好，我是你们今天的“文件系统探险家”——小码哥！今天咱们不聊虚的，直接深入浏览器腹地，扒一扒这个有点神秘又很实用的 File System Access API，看看它到底是怎么在保证安全的前提下，让你的网页也能“摸”到本地文件。

一、File System Access API：浏览器里的文件管理员

很久很久以前（其实也没多久），网页想访问本地文件，那简直比登天还难。要么靠 <input type="file"> 这种“老实人”控件，一次只能选一个文件，而且只能上传。要么就得用一些“歪门邪道”，比如 Flash，但 Flash 这家伙现在坟头草都三尺高了。

File System Access API 的出现，就像给浏览器配了个专业的“文件管理员”。它允许网页在用户明确授权的前提下，安全地读写本地文件和目录。注意，是用户授权！安全第一！

二、为什么我们需要 File System Access API？

你可能会问：“上传文件不也能用吗？干嘛费劲搞这么个新玩意？”

问得好！传统的上传方式有几个痛点：

性能瓶颈： 大文件上传慢得让人抓狂，而且浪费带宽。
功能限制： 只能上传，不能直接编辑保存。想象一下，在线图像编辑器每次修改都要上传下载，那得多崩溃！
用户体验： 选择文件、上传、处理、下载，流程繁琐，用户体验差。

File System Access API 就像一把钥匙，解锁了以下可能性：

本地编辑： 直接在浏览器里编辑本地文件，修改后直接保存，无需上传下载。
目录访问： 访问整个目录，方便处理大量文件，比如批量重命名、压缩等。
拖拽集成： 将文件或目录拖拽到网页中，直接进行处理。
更灵活的权限控制： 可以控制网页对文件的读写权限，防止恶意操作。

三、权限模型：安全是底线

File System Access API 的核心在于权限控制。它采用了一种“步步为营”的授权模式，每一步操作都需要用户的明确许可。

用户主动发起： 网页不能偷偷摸摸地访问文件系统。必须由用户主动触发，比如点击按钮、拖拽文件等。
权限请求： 网页通过 API 发起权限请求，浏览器会弹出权限提示框，让用户选择是否允许访问。
作用域限制： 权限的作用域仅限于用户选择的文件或目录，网页无法访问其他未经授权的文件。
记住授权： 浏览器会记住用户的授权，下次访问相同的文件或目录时，可能不再需要再次授权（取决于浏览器的策略）。

这种权限模型就像给每个文件都上了锁，钥匙掌握在用户手中。网页只有得到用户的许可，才能打开这把锁。

四、用户交互流程：一步一个脚印

让我们通过一个简单的例子，来了解一下 File System Access API 的用户交互流程。

场景： 用户点击一个按钮，选择一个文本文件，网页读取文件内容并在页面上显示。

代码：

<!DOCTYPE html>
<html>
<head>
  <title>File System Access API Demo</title>
</head>
<body>
  <button id="openFileButton">打开文件</button>
  <div id="fileContent"></div>

  <script>
    const openFileButton = document.getElementById('openFileButton');
    const fileContentDiv = document.getElementById('fileContent');

    openFileButton.addEventListener('click', async () => {
      try {
        // 1. 打开文件选择器
        const [fileHandle] = await window.showOpenFilePicker();

        // 2. 获取文件对象
        const file = await fileHandle.getFile();

        // 3. 读取文件内容
        const contents = await file.text();

        // 4. 显示文件内容
        fileContentDiv.textContent = contents;
      } catch (err) {
        console.error('读取文件失败：', err);
        fileContentDiv.textContent = '读取文件失败';
      }
    });
  </script>
</body>
</html>

流程分析：

用户点击“打开文件”按钮。 这触发了 addEventListener 中定义的回调函数。
window.showOpenFilePicker()： 这个函数会打开一个原生的文件选择器对话框，让用户选择文件。注意，showOpenFilePicker() 返回一个 Promise，必须使用 await 等待用户选择。
- 权限请求： 这是关键的一步！如果用户之前没有授权过，浏览器会弹出权限提示框，询问用户是否允许网页访问文件系统。
- 用户选择文件： 用户选择一个文件后，文件选择器关闭，showOpenFilePicker() 返回一个包含 FileSystemFileHandle 对象的数组。FileSystemFileHandle 对象代表用户选择的文件。
fileHandle.getFile()： FileSystemFileHandle 对象提供了 getFile() 方法，用于获取 File 对象。File 对象包含了文件的元数据（例如文件名、大小、类型）和内容。
file.text()： File 对象提供了多种方法来读取文件内容，例如 text() (读取文本文件)、arrayBuffer() (读取二进制文件) 等。这里我们使用 text() 方法读取文本文件的内容。
fileContentDiv.textContent = contents;： 最后，我们将读取到的文件内容显示在页面上。
异常处理： try...catch 语句块用于捕获可能发生的错误，例如用户取消选择文件、文件读取失败等。

五、核心概念：Handle、File、Stream

File System Access API 引入了几个新的概念，理解它们对于使用 API 至关重要。

概念	描述
`FileSystemHandle`	所有文件系统入口点的基类，包括文件和目录。
`FileSystemFileHandle`	代表一个文件的句柄，可以用来获取 `File` 对象或创建一个 `FileSystemWritableFileStream` 对象。
`FileSystemDirectoryHandle`	代表一个目录的句柄，可以用来遍历目录中的文件和子目录。
`File`	一个代表文件的对象，包含了文件的元数据和内容。
`FileSystemWritableFileStream`	用于向文件中写入数据的流，是 `WritableStream` 的一个子类。

六、进阶用法：读写文件、创建目录

除了读取文件，File System Access API 还支持写入文件和创建目录。

1. 写入文件：

async function writeFile(fileHandle, contents) {
  try {
    // 1. 创建可写流
    const writable = await fileHandle.createWritable();

    // 2. 写入内容
    await writable.write(contents);

    // 3. 关闭流
    await writable.close();

    console.log('文件写入成功！');
  } catch (err) {
    console.error('文件写入失败：', err);
  }
}

// 调用示例
openFileButton.addEventListener('click', async () => {
  try {
    const fileHandle = await window.showSaveFilePicker(); // 使用 showSaveFilePicker
    await writeFile(fileHandle, 'Hello, File System Access API!');
  } catch (error) {
    console.error("Failed to save file:", error);
  }
});

代码解释：

window.showSaveFilePicker()： 这个函数会打开一个“另存为”对话框，让用户选择保存文件的位置和文件名。与 showOpenFilePicker 不同，这个函数用于保存文件。
fileHandle.createWritable()： FileSystemFileHandle 对象提供了 createWritable() 方法，用于创建一个 FileSystemWritableFileStream 对象。FileSystemWritableFileStream 对象允许我们向文件中写入数据。
writable.write(contents)： FileSystemWritableFileStream 对象的 write() 方法用于写入数据。可以写入字符串、ArrayBuffer、Blob 等类型的数据。
writable.close()： 写入完成后，必须调用 close() 方法关闭流。

2. 创建目录：

async function createDirectory() {
  try {
    // 1. 打开目录选择器
    const directoryHandle = await window.showDirectoryPicker();

    // 2. 创建子目录
    const newDirectoryHandle = await directoryHandle.getDirectoryHandle('newDirectory', { create: true });

    console.log('目录创建成功！');
  } catch (err) {
    console.error('目录创建失败：', err);
  }
}

// 调用示例
const createDirButton = document.createElement('button');
createDirButton.textContent = '创建目录';
document.body.appendChild(createDirButton);

createDirButton.addEventListener('click', createDirectory);

代码解释：

window.showDirectoryPicker()： 这个函数会打开一个目录选择器对话框，让用户选择一个目录。
directoryHandle.getDirectoryHandle('newDirectory', { create: true })： FileSystemDirectoryHandle 对象提供了 getDirectoryHandle() 方法，用于获取子目录的句柄。如果子目录不存在，并且 create 参数设置为 true，则会自动创建子目录。

七、安全性考量：沙箱与权限

虽然 File System Access API 提供了强大的文件系统访问能力，但安全性始终是第一位的。

沙箱环境： 网页运行在沙箱环境中，无法直接访问本地文件系统。必须通过 File System Access API 提供的接口，并在用户授权的前提下才能访问。
权限控制： API 提供了精细的权限控制机制，可以限制网页对文件的读写权限。
用户感知： 每次访问文件系统都需要用户的明确许可，确保用户知情并同意。
安全策略： 浏览器会不断更新安全策略，防止恶意网页利用 API 漏洞。

八、浏览器兼容性：渐进增强

File System Access API 的浏览器兼容性还在不断完善中。目前，Chrome 和 Edge 浏览器支持得比较好，其他浏览器可能需要开启实验性功能。

在使用 API 时，建议采用渐进增强的方式：

特性检测： 首先检测浏览器是否支持 File System Access API。
优雅降级： 如果浏览器不支持 API，则提供备选方案，例如传统的上传方式。

代码示例：

if ('showOpenFilePicker' in window) {
  // 浏览器支持 File System Access API
  console.log('File System Access API is supported!');
} else {
  // 浏览器不支持 File System Access API
  console.log('File System Access API is not supported.');
  // 提供备选方案
}

九、总结：File System Access API 的未来

File System Access API 为网页带来了前所未有的文件系统访问能力，但也带来了安全挑战。

优点	缺点
更高效的本地文件编辑和处理	安全性风险：如果 API 使用不当，可能导致安全漏洞。
更流畅的用户体验，避免了频繁的上传下载。	兼容性问题：不同浏览器的支持程度不同。
更灵活的权限控制，可以限制网页对文件的读写权限。	用户体验：频繁的权限提示可能会影响用户体验，需要在权限请求时做好解释说明。
为 PWA (Progressive Web Apps) 提供了更强大的本地存储和处理能力，可以开发更强大的离线应用。	学习成本：需要了解新的 API 和概念。

未来，随着浏览器厂商的不断改进和安全策略的不断完善，File System Access API 将会更加安全可靠，并为网页带来更多可能性。

十、Q&A 环节：解答你的疑惑

现在，欢迎大家提问，我会尽力解答你们关于 File System Access API 的疑惑。

(等待提问…)

例如：

Q: 如何判断用户是否已经授权？
- A: 目前还没有直接的方法判断用户是否已经授权。但可以通过尝试访问文件，如果成功则说明已授权，否则需要请求权限。
Q: 可以跨域访问文件吗？
- A: 出于安全考虑，File System Access API 不允许跨域访问文件。
Q: 如何撤销用户的授权？
- A: 用户可以在浏览器的设置中管理网站的权限，撤销对文件系统的访问权限。

今天的分享就到这里了！希望大家通过今天的“文件系统探险之旅”，对 File System Access API 有了更深入的了解。下次再见！

发表回复 取消回复

发表回复取消回复