使用浏览器获取客户端计算机目录中所有文件的列表答案

【问题标题】：Get a list of all files within a directory in a client machine using browser使用浏览器获取客户端计算机目录中所有文件的列表
【发布时间】：2022-06-20 21:20:14
【问题描述】：

这里的用例虽然不是那么重要，但实际使用才是。我想通过浏览器浏览用户本地文件系统，就像我们通过<input type="file"> 一样，但我不想选择一个文件，而是选择一个目录并获取其中所有文件和目录的列表。

一旦我得到文件列表，我想在树状结构中递归地显示它们。

这是我知道可以通过File System Access Api 完成的示例。

我只是想使用这个 API 来创建文件管理器或树视图之类的东西。

谢谢。

【问题讨论】：

标签： native-file-system-api-js

【解决方案1】：

要枚举目录中的所有文件，请调用showDirectoryPicker()。用户在选择器中选择一个目录，然后返回一个FileSystemDirectoryHandle，让您可以枚举和访问该目录的文件。

const button = document.getElementById('button');
button.addEventListener('click', async () => {
  const dirHandle = await window.showDirectoryPicker();
  for await (const entry of dirHandle.values()) {
    console.log(entry.kind, entry.name);
  }
});

如果您还需要通过getFile() 访问每个文件以获取各个文件大小，请不要对每个结果按顺序使用await，而是并行处理所有文件，例如通过@ 987654326@.

const button = document.getElementById('button');
button.addEventListener('click', async () => {
  const dirHandle = await window.showDirectoryPicker();
  const promises = [];
  for await (const entry of dirHandle.values()) {
    if (entry.kind !== 'file') {
      break;
    }
    promises.push(entry.getFile().then((file) => `${file.name} (${file.size})`));
  }
  console.log(await Promise.all(promises));
});

【讨论】：