js showOpenFilePicker showSaveFilePicker showDirectoryPicker API
选择文件，获取文件句柄
btn.addEventListener("click", async (e) => {
try {
const hFiles = await window.showOpenFilePicker({
types: [
{
description: "文本文件",
accept: {
"text/plain": [".txt"],
},
},
],
});
if (!hFiles || !hFiles.length) return;
const hFile = hFiles[0];
l(hFile);
} catch (error) {
console.error(error);
}
});
从文件句柄中获取文件的内容
const file = await hFile.getFile();
const r = new FileReader();
r.readAsText(file);
r.onload = (e) => {
const fileData = e.target.result;
l(fileData);
};
// or
l(await file.text());
l(await file.arrayBuffer());
l(await file.stream().getReader().read());
使用文件句柄写入内容
const w$ = await hFile.createWritable();
await w$.write('hello ');
await w$.write('world');
await w$.close();
使用 showSaveFilePicker
const hFile = await window.showSaveFilePicker();
const w = await hFile.createWritable();
await w.write('new data');
await w.close();
打开目录
const hDir = await window.showDirectoryPicker();
// 打印文件名，和类型
for await (const it of hDir.values()) {
l('[[ %s ]] is %s', it.name, it.kind);
}
// 打印文件名和句柄
for await (const [name, handle] of hDir) {
l(name, handle);
}
在目录句柄中创建一个新的目录(名叫"NewDir"的目录)，返回新创建目录的句柄
const hNewDir = await hDir.getDirectoryHandle("NewDir", {
create: true,
});
在目录句柄中创建一个新的文件(名叫"newFile.txt"的文件)，返回新创建文件的句柄
const hNewFile = await hDir.getFileHandle("newFile.txt", {
create: true,
});
往新创建的文件中写入内容
const w$ = await hNewFile.createWritable();
await w$.write('在新创建的文件中写入内容');
await w$.close();
遍历整个目录
const scanDir = async (root, hDir) => {
for await (const [name, handle] of hDir) {
const path = await root.resolve(handle);
if (handle instanceof FileSystemDirectoryHandle) {
l("./%s/", path.join("/"));
scanDir(root, handle);
} else l("./%s", path.join("/"));
}
};
scanDir(hDir, hDir);
删除目录中指定的文件
await hDir.removeEntry('newFile.txt');
在目录中递归删除子目录
await hDir.removeEntry("Debug", { recursive: true });
isSameEntry
如果是同一文件或目录则返回true
const hDir = await window.showDirectoryPicker();
const hFile = await hDir.getFileHandle("3.txt");
console.log( await hFile.isSameEntry(hFile) ); // true
console.log( await hDir.isSameEntry(hDir) ); // true
console.log( await hFile.isSameEntry(hDir) ); // false
console.log( await hDir.isSameEntry(hFile) ); // false
resolve
获取文件在目录中的路径
const hDir = await window.showDirectoryPicker();
const hFile = await hDir.getFileHandle("3.txt");
console.log( await hDir.resolve(hFile) ) // ["3.txt"]
See also:
