遍历Firebase存储以显示多张图片

Question

目前我可以通过图片的标题和位置获取特定的图片，但我希望能够显示存储内一个文件夹中的所有图片，仅知道该文件夹的位置而不知道内容标题。

我已经尝试使用下面的代码（projectID是需要显示所有元素的文件夹），但似乎并不起作用。我是javascript新手，对于.once的错误调用表示歉意。

const childRef = storageRefer.child(`${projectID}`);
childRef.once("value", function(snapshot) {
  snapshot.forEach(function(child) {
    child.getDownloadURL().then(function(url) {
      console.log(url);
    });
  });
});

这段代码应该能够记录所有图像的url，但我只得到一个关于.once函数的错误。如果有人知道我做错了什么或更好的方法来获取存储在我的存储库中的一个文件夹中的所有图像，那将非常有帮助，谢谢！

编辑：

回头看这个问题，我意识到我可以将图像位置存储到数据库中，因为我可以轻松地遍历数据库而不需要知道里面的内容，并调用存储库获取图像，但这似乎很笨拙？

- Shodmoth

Answer 1

当前 Firebase 存储库中没有列出文件夹中所有文件的 API 调用。如果需要这样的功能，您应该将文件的元数据（例如下载 URL）存储在可以列出它们的地方。Firebase Firestore 是完美的选择，它还允许您轻松地与其他人共享 URL。

- Abdulla Thanseeh

---

我明白这个方法的原理，但是我似乎遇到了一个错误：Uncaught TypeError: childRef.once is not a function，你知道可能是什么原因吗？再次道歉，因为我习惯于像Python和Java这样的语言，而不太习惯JavaScript。 - Shodmoth

什么是storageRefer？您无法直接从存储中下载文件，而是需要从文档中访问其URL并调用图像。 - Abdulla Thanseeh

抱歉，const storage = firebase.storage(); const storageRefer = storage.ref();是在我的HTML文件中直接嵌入的脚本语句中定义的，因此我可以从任何JavaScript文件中调用它。您所说的从文档中访问图像是什么意思？我可以使用诸如storageRefer.child('${projectID}').child("horse.jpg").getDownloadURL().then(function(url) {document.querySelector("#imgUpload").setAttribute("src", url)});这样的函数直接获取图像。 - Shodmoth

childRef 的 console.log 输出内容是什么？ - Abdulla Thanseeh

Firebase Storage是建立在Google Cloud Storage之上的，它确切地做了你所说的事情：将所有对象存储在一个长列表中。Firebase Storage在此基础上建立了一个层次结构，尽管这是一个有缺陷的抽象。在Firebase Storage中使用文件夹的常见原因是为了逻辑数据分离和根据文件夹结构制定安全规则。 - Abdulla Thanseeh

谢谢你的帮助，我希望能够像在数据库中一样获取那些信息，因为这样就不需要重复存储信息了。 - Shodmoth

Answer 2

 var listRef = firebase.storage().ref().child('profiles/');


  listRef.listAll().then(function(res){
     res.items.forEach(function(itemRef){
      itemRef.getDownloadURL().then(function (link) {
        console.log(link);
      })
    
   })
 })
}

这个函数将会带来所有保存在“Profile”存储中的照片。希望它能对你有用。

- Christopher Ortiz

---

欢迎！在 SO 帖子中使用英语语言是一种预期的做法。 - xmike

哦，请原谅。我没有意识到我用西班牙语评论了。 - Christopher Ortiz

Answer 3

@Shodmoth 请查看这个新的Firebase链接（https://firebase.google.com/docs/storage/web/list-files），了解如何列出文件夹中的所有文件。

// Create a reference under which you want to list
var listRef = storageRef.child('files/uid');

// Find all the prefixes and items.
listRef.listAll().then(function(res) {
  res.prefixes.forEach(function(folderRef) {
     console.log(folderRef)
  });
  res.items.forEach(function(itemRef) {
     console.log(itemRef) //can call .getDownloadURL() on each itemRef
  });
}).catch(function(error) {
  // Uh-oh, an error occurred!
});

- Tommy Hessel