File System Access API 让浏览器操作本地文件


字数:708 阅读时长:3分钟 阅读:85

浏览器沙盒模型曾限制了对本地文件的操作,但现在,File System Access API 允许Web应用程序在用户授权的情况下,从本地文件系统中读取和写入文件。

File System Access API

什么是 File System Access API

File System Access API 是一种Web API,它提供了一种安全的方法,让用户在不离开Web应用的情况下操作本地文件。这项API遵循同源策略,并且需要用户授权。

功能

  • 上传本地文件到Web应用
  • 将Web应用数据写入本地文件系统
  • 在本地创建、重命名、删除文件
  • 读取本地文件内容

使用 File System Access API

选择文件

使用 showOpenFilePicker 方法选择文件,返回 FileHandle 对象。

1
2
const fileHandle = await window.showOpenFilePicker();
console.log(fileHandle);

FileHandle 对象可以获取文件信息,例如使用 getFile 方法。

FileSystemFileHandle 对象

提供方法操作文件:

  • getFile: 获取文件
  • createSyncAccessHandle: 同步访问文件
  • createWritable: 创建可写流

示例代码:

1
2
3
const fileHandle = await window.showOpenFilePicker();
const file = await fileHandle[0].getFile();
console.log(file);

选择目录

使用 showDirectoryPicker 方法选择目录,返回 FileSystemDirectoryHandle 对象。

1
2
const directoryHandle = await window.showDirectoryPicker();
console.log(directoryHandle);

FileSystemDirectoryHandle 对象

提供方法操作目录:

  • entries: 获取目录中所有文件和目录的AsyncIterable
  • keys: 获取目录中所有文件和目录的名称
  • values: 获取目录中所有文件和目录的 FileSystemHandle 对象
  • getFileHandle: 获取目录中的文件
  • getDirectoryHandle: 获取目录中的目录
  • removeEntry: 删除目录中的文件或目录
  • resolve: 获取目录中的文件或目录

遍历目录示例:

1
2
3
4
5
6
7
8
const directoryHandle = await window.showDirectoryPicker();
for await (const [name, handle] of directoryHandle.entries()) {
if (handle.kind === 'file') {
console.log(name, 'file');
} else {
console.log(name, 'directory');
}
}

操作文件和目录

读取文件

使用 FileReader 对象读取文件。

1
2
3
4
5
6
7
8
9
10
11
12
const fileHandle = await window.showOpenFilePicker({
types: [{
description: 'Text files',
accept: {'text/plain': ['.txt']},
}],
});
const file = await fileHandle[0].getFile();
const reader = new FileReader();
reader.onload = () => {
console.log(reader.result);
};
reader.readAsText(file);

写入文件

使用 createWritable 方法写入文件。

1
2
3
4
5
6
7
8
9
const fileHandle = await window.showSaveFilePicker({
types: [{
description: 'Text files',
accept: {'text/plain': ['.txt']},
}],
});
const writable = await fileHandle.createWritable();
await writable.write('Hello World!');
await writable.close();

创建和删除目录

创建目录使用 getDirectoryHandle 方法,删除目录使用 removeEntry 方法。

1
2
3
const directoryHandle = await window.showDirectoryPicker();
const newDirectoryHandle = await directoryHandle.getDirectoryHandle('new-directory', { create: true });
await directoryHandle.removeEntry('new-directory');

兼容性

目前,showDirectoryPickershowOpenFilePicker 在Chrome 86版本中可用,但Firefox不支持。

总结

本文介绍了 File System Access API 的基本使用方法,包括文件和目录的获取与操作。由于API仍在实验阶段,更多详细信息请参考参考资料。

参考资料


欢迎访问:天问博客

本文作者: Tiven
发布时间: 2024-05-26
最后更新: 2024-06-26
本文标题: File System Access API 让浏览器操作本地文件
本文链接: https://www.tiven.cn/p/479239c4/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^
个人邮箱: tw.email@qq.com
notification icon
博客有更新,将会发送通知给您!