不常用的浏览器 API —— File System Access

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情。

本篇来看 File System Access 相关的 API，这部分 API 是用来访问文件系统的，也是比较新的 API，基本上不太可用，我们主要是了解一下。

长期以来浏览器都是一个独立的环境，它是一个独立的沙箱，特点就是用完即走。在这样的背景下，浏览器内部对访问外面的东西一直有着严格的限制，这也是前端和 native 客户端一个重要的区别。但是随着前端应用技术的不断发展和成熟，我们也看到蓝牙、传感器、HID 等大量的硬件设备访问 API 都被加入进来，加上 PWA 能够给网页带来应用一样的体验，前端未来的趋势是越来越接近 native 端。而文件系统 API 的加入，无疑是让这种趋势又上了一个台阶，可以说之前是几乎不可想象的。

浏览器文件 API 允许与用户本地设备或用户可访问的网络文件系统上的文件进行交互，包括读取文件、写入或保存文件以及访问目录结构等，基本已经具备了完整应用的能力，当然在此之前需要用户授权就不多说了。

我们来看一下使用情况：

let fileHandle;
async function getFile() {
  [fileHandle] = await window.showOpenFilePicker();
  if (fileHandle.kind === 'file') {
  } else if (fileHandle.kind === 'directory') {
  }
}

核心 API 是 showOpenFilePicker，使用后可以调起系统的文件选择器，根据选择的是文件还是目录会回调给我们不同类型的 fileHandle，使用 fileHandle 就可以对文件进行操作。

除了读取，浏览器也可以进行写操作：

async function saveFile() {
  const newHandle = await window.showSaveFilePicker();
  const writableStream = await newHandle.createWritable();
  await writableStream.write(imgBlob);
  await writableStream.close();
}

showSaveFilePicker 同样也会调起系统级别的文件保存窗口，之后正常写入内容就可以完成保存了。