如何使用 fetch 列出文件夹内的文件？

Question

我正在运行实时服务器扩展作为我的项目的模拟后端。因此，我的程序的一部分涉及检查数据库中某个文件夹内的所有文件。

main folder
   |
   ___ subfolder1
   |       |
   |       ___ 1.png
   |       ___ 2.png
   |
   |
   ___ subfolder1
           |
           ___ 1.png
           ___ 2.png
           ___ 3.png

我使用的是 firebase，因此这是使用

listAll()

函数实现的。 但是，为了模拟此功能，我使用

fetch()

。但到目前为止，我只能弄清楚如何通过 URL 获取单个文件

const localHostUrl = 'http://127.0.0.1:5500';
const fetchedFile = await fetch(`${localHostUrl}/mainFolder/subfolder1/1.png`); // this works
const fetchedFolder = await fetch(`${localHostUrl}/mainFolder/subfolder1`); // this doesn't work

我打算查看文件夹内的文件数量、文件名称，并在后续命令中相应地获取它们。如何使用 fetch 查看文件结构？任何其他替代解决方法也将受到赞赏

Answer 1

fetch

无法检查文件系统。它是一个用于发出 HTTP 请求的 API。

如果您想检查网络服务器上的文件系统，请编写一个网络服务来执行此操作。您可以使用

fetch

与该 Web 服务交互。

Answer 2

如果您的模拟服务器启用了目录列表，那么您可以使用 fetch() 来执行此操作。像 http-server 这样的服务器默认启用此功能。您只需在浏览器中输入目录地址即可测试 fetch() 是否有效，然后查看服务器的回复内容。如果它回复一个列出该目录中文件的页面，那么 fetch 也可以做到这一点。要解析 fetch() 返回的 html 页面文本，您可能必须修改下面的代码，因为每个服务器构建的目录列表都不同。这将与 http 服务器一起使用：

function getDirectory(dirname,donefunc) {
  fetch(dirname)
   .then(response => response.text())
   .then(str => {
     let el = document.createElement('html');
     el.innerHTML = str;

     // this call will work for http-server and may have to be modified for other servers
     // inspect the returned string to determine the proper parsing method
     let list = el.getElementsByTagName("table")[0].getElementsByTagName("a");
     let arr = [];
     for (i = 0; i < list.length; i++) {
       arr[i] = list[i].innerHTML;
     }
     arr.shift(); // get rid of first result which is the "../" directory reference
     console.log(arr); // this is your list of files
     if(donefunc) donefunc(arr);
   })
   .catch(error => console.log(error));
}