本地IO操作之File System Access API

## 什么是 File System Access API

> 借助 File System Access API，开发者可以构建功能强大的 Web 应用（例如 IDE、照片和视频编辑器、文本编辑器等），与用户本地设备上的文件进行交互。用户向 Web 应用授予访问权限后，此 API 让 Web 应用可以直接读取用户设备上的文件和文件夹内容，或者保存对这些内容的更改。除了读取和写入文件之外，File System Access API 还提供了打开目录并枚举其内容的功能。

应用示例：[在线文本编辑器](https://googlechromelabs.github.io/text-editor/ "在线文本编辑器")

*注意：该API为2024年3月20日，社区小组报告草案，目前Chromium浏览器支持*
*注意：此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用*
*注意：该API方法必须从用户手势中调用*
*注意：文中示例为求精简演示，并未做异常处理。不建议直接使用*

## 读取本地文件
```javascript
window.showOpenFilePicker()
```
它会显示一个文件选择器对话框。用户选择文件后，返回一个文件句柄数组。下面是一个让用户选择文件，并读取其内容的示例：
```javascript
const [fileHandle] = await window.showOpenFilePicker()
const file = await fileHandle.getFile()
const contents = await file.text()
console.log(contents)
```

## 写入本地文件

创建文件，写入文件。

### 创建文件
```javascript
window.showSaveFilePicker()
```

它会显示一个目录选择器对话框。用户选择后，会在该位置创建一个文件。下面是一个示例：

```javascript
  window.showSaveFilePicker({
    types: [
      {
        description: '文本文件',
        accept: {
          'text/plain': ['.txt'],
        },
        name: 'newFile',
      },
    ],
    suggestedName: 'newFile',
  })
  .then(() => {
    console.log('创建文件: newFile.txt')
  })
```

### 写入文件

首先要获得一个待写入文件的句柄。比如我们使用上面刚刚展示的选择器。以下是个示例：
```javascript
// 打开一个文件,获得该文件的句柄
const [fileHandle] = await window.showOpenFilePicker()
// 使用该句柄创建一个可写流
const writable = await fileHandle.createWritable()
await writable.write('hello world' + new Date().getTime())
await writable.close()
```

## 移动，重命名，删除本地文件

### 移动和重命名文件

```javascript
// 重命名
await file.move('new_name');
// 移动
await file.move(directory);
// 移动并重命名
await file.move(directory, 'newer_name');
```
以下是个示例：
```javascript
let fileHandle = void 0
async function test() {
  // 打开一个文件,获得该文件的句柄
  [fileHandle] = await window.showOpenFilePicker()
  // 重命名
  await fileHandle.move('new_' + fileHandle.name)
}
// 当用户选择一个文件，获取句柄fileHandle后(比如用户点击按钮执行了test()方法):
// 再次操作选择一个移动的目录(执行test2())
async function test2() {
  // 打开一个目录
  const fileDirectoryHandle = await window.showDirectoryPicker()
  // 移动至刚打开的目录
  await fileHandle.move(fileDirectoryHandle)
}
```

### 删除文件

直接删除文件，文件夹：

```javascript
// 删除文件
await fileHandle.remove()
// 删除文件夹
await directoryHandle.remove()
```

删除文件夹中的文件，文件夹：

```javascript
// 删除文件夹中的文件.
await directoryHandle.removeEntry('文件名')
// 删除文件夹及其中的文件.
await directoryHandle.removeEntry('目录名', { recursive: true })
```
其中 `recursive: true`为递归操作，即删除全部内容。

## 更多例子

### 打开文件夹，并生成目录树
```javascript
// 遍历目录
async function resolveDirectory(dirHandle, tree) {
  const node = {
    name: dirHandle.name,
    kind: dirHandle.kind,
    dirHandle,
    children: [],
  }
  tree.push(node)
  if (dirHandle.kind === 'directory') {
    for await (const entry of dirHandle.values()) {
      await resolveDirectory(entry, node.children)
    }
  }
}

// 打开目录
async function getDirectory() {
  directoryHandle = await window.showDirectoryPicker({ startIn: 'desktop' })
  const rootTree = []
  await resolveDirectory(directoryHandle, rootTree)
  console.log(rootTree) // 目录树
}
// 当用户进行了手势操作，比如点击了一个按钮
anyButton.onclick = () => getDirectory()
```

以上就是这个API的一些基本使用了，本文主要想建立起一个基础认识。其实还有很多内容，可以参考下面第一个参考资料。

## 参考资料：

[https://developer.chrome.google.cn/docs/capabilities/web-apis/file-system-access?hl=zh-cn](https://developer.chrome.google.cn/docs/capabilities/web-apis/file-system-access?hl=zh-cn "https://developer.chrome.google.cn/docs/capabilities/web-apis/file-system-access?hl=zh-cn")
[https://wicg.github.io/file-system-access/](https://wicg.github.io/file-system-access/ "https://wicg.github.io/file-system-access/")

2024-11-28 14:20:52 150 0

浏览器页面通信的三个API对比介绍 Cookie Store API

本地IO操作之File System Access API

相关文章

参与讨论

选择你的头像