javascript - 访问给定文件夹中的所有文件（文件系统访问 API）

Question

我可以使用文件系统访问 API ( https://web.dev/file-system-access/ ) 在网站中创建类似文件资源管理器的东西 (react)。

我打算做一个简单的在线文件浏览器，让你浏览打开一个文件夹，然后让你浏览文件夹，播放视频和 MP3。

（我知道几年前这是不可能的，因为 js 不可能访问本地存储中的任何内容，我只想知道是否有任何更改。如果文件系统访问 API 不是要走的路，您能否建议一些更好的方法来从文件夹中读取批量本地文件。）

Answer 1

今天的文件系统访问 API 可以做到这一点：

const dirHandle = await window.showDirectoryPicker();
for await (const entry of dirHandle.values()) {
  console.log(entry.kind, entry.name);
}

entry.kind如果是目录，您可以通过更深入地探索文件夹结构。

Answer 2

为了将来参考，我发布了我的工作；https://github.com/akshayknz/filesystem-access-api/blob/main/file.html（一个显示所选文件夹中所有图像的html页面。）

注意：API 仅在安全上下文中工作（即它在 https:// 和 file:/// 中工作）

[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();

或者

const dirHandle = await window.showDirectoryPicker();
const fileHandle = await dirHandle.getFileHandle(entry.name, {});
const file = await fileHandle.getFile();