使用File System Access API 直接读写本地文件

File System Access API 是一个相对较新的 API，它允许 Web 应用直接访问用户的本地文件系统，提供了文件的读取、编辑和保存功能。这项 API 极大地扩展了 Web 应用的能力，使其可以像桌面应用一样处理文件。

什么是 `File System Access API`？

File System Access API 允许用户在 Web 应用中选择本地文件并进行操作。你可以通过此 API 读取、修改甚至创建文件，从而实现诸如文本编辑器、图像编辑器等应用场景。用户需明确授权才能让 Web 应用访问其本地文件。

基本用法

1. 打开文件并读取内容

使用 showOpenFilePicker() 方法，可以让用户选择一个文件，然后读取其内容：

javascript 复制代码

async function readFile() {
  try {
    // 显示文件选择器
    const [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();
    const contents = await file.text();
    console.log('文件内容:', contents);
  } catch (error) {
    console.error('读取文件失败:', error);
  }
}

readFile();

2. 保存文件

使用 showSaveFilePicker() 可以让用户选择保存位置并写入文件内容：

javascript 复制代码

async function saveFile() {
  try {
    const fileHandle = await window.showSaveFilePicker({
      suggestedName: 'example.txt',
      types: [{
        description: 'Text Files',
        accept: { 'text/plain': ['.txt'] }
      }]
    });

    const writable = await fileHandle.createWritable();
    await writable.write('Hello, File System Access API!');
    await writable.close();
    console.log('文件保存成功');
  } catch (error) {
    console.error('保存文件失败:', error);
  }
}

saveFile();

应用场景

文本编辑器：可以实现 Web 版的文本编辑器，用户可以直接从本地读取文件进行编辑，并保存修改。
图像编辑器：允许用户从本地上传图像进行处理，然后保存修改后的文件。
文件管理工具：为用户提供一个 Web 应用版本的文件管理工具，实现文件的浏览、修改和创建。

权限与安全

File System Access API 出于安全考虑，所有文件操作都需要用户明确授权。用户每次操作都会弹出文件选择对话框，确保 Web 应用不会未经允许修改或访问用户文件。

优势

提供了原生的文件读写能力，使 Web 应用具备桌面应用的文件操作功能。
不需要依赖服务器端进行文件操作，用户可以直接本地完成文件处理。
增强用户隐私，文件操作由用户完全控制，确保安全性。

兼容性

目前 File System Access API 主要被 Chrome 和 Edge 等基于 Chromium 的浏览器支持，但其他浏览器尚未完全支持。未来随着 API 的成熟，预计会有更多浏览器加入对该 API 的支持。

注意事项

HTTPS ：为了确保安全，File System Access API 只能在 HTTPS 页面上工作。
权限提示：每次操作（如读取、写入文件）都会请求用户授权，防止未经许可的文件访问。

File System Access API 让 Web 应用可以更好地与本地文件系统进行交互，突破了以往只能通过上传下载方式与文件打交道的限制。它的出现使得 Web 应用在功能性上接近桌面应用，是开发现代化 Web 应用的一大利器。