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

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

什么是 File System Access API

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

功能

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

使用 File System Access API

选择文件

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

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

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

FileSystemFileHandle 对象

提供方法操作文件：

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

示例代码：

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

选择目录

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

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

FileSystemDirectoryHandle 对象

提供方法操作目录：

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

遍历目录示例：

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 对象读取文件。

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 方法写入文件。

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 方法。

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

兼容性

目前，showDirectoryPicker 和 showOpenFilePicker 在Chrome 86版本中可用，但Firefox不支持。

总结

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

参考资料

• File System Access API
• WICG File System Access API
• MDN File System Access API
• MIME types
• caniuse showOpenFilePicker

---

欢迎访问：天问博客

本文作者： Tiven
发布时间： 2024-05-26
最后更新： 2024-06-26
本文标题： File System Access API 让浏览器操作本地文件
本文链接： https://www.tiven.cn/p/479239c4/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！