如何从 Firebase 存储中下载图像文件列表

Question

我有一个网站，它的网格中有卡片，里面有图片和标题，例如

我想从 firebase 存储中获取图像列表，问题是如果我存储相同的图像文件，我的其他具有相同图像的图像文件会损坏，

如何从 Firebase 存储中获取图像列表。 或者使用结合firebase数据库存储图像文件的最佳方法是我添加新卡的代码是这样的我存储图像元数据下载URL

const storageRef = firebase.storage().ref();

for (let selectedFile of [(<HTMLInputElement>document.getElementById('image')).files[0]]){

  let path = `/${this.prosforesFolder}/${selectedFile.name}`;
  let iRef = storageRef.child(path);

  iRef.put(selectedFile).then((snapshot) => {

    prosfora.imageUrl = snapshot.downloadURL;
    prosfora.image = selectedFile.name;
    prosfora.path = path;
    // firebase.database().ref('/listings').push(listing);
    return this.prosfores.push(prosfora);
  });

}

但我得到的是，如果我存储 6 个具有相同图像文件名的文件，则只有最后一个图像可以渲染其他 5 个已损坏

为了从火力基地获取图像，我只是调用了这个函数

// gets the list of ypiresies 
this.firebaseService.getProsfores().subscribe(prosfores => {

  this.prosfores = prosfores;

  if (prosfores.length > 0) {
    this.prosforesExist = true;
  } else {
    this.prosforesExist = false;
  }

  console.log(prosfores);

  // afto kanei hide to preloader
  $( ".preloader-wrapper" ).hide();

  $(document).ready(function(){
    $('.gallery-expand').galleryExpand({
      // dynamicRouting : true
      // defaultColor: 'red'
      // fillScreen : 'true'
    });
  });

});

我做错了什么，有什么方法可以在将文件上传到 Firebase 存储之前更改文件名？？？

喜欢 image.png 图像-v2.png image-v3.png

我该怎么做？？

欢迎任何帮助

Answer 1

作为您的问题的起点，我可以让您使用 listAll 函数首先从数据库中收集所有图像。 Firebase 将其放在网站List files with Cloud Storage on Web 根据该基本功能，您可以使用 ListRef 下的 ItemRefs 继续您需要的内容：

function AllImages() {
  const storageRef = firebase.storage().ref();
  // Create a reference for folder 'formimages'
  var listRef = storageRef.child("formimages");
  // Find all the prefixes and items.
  listRef
    .listAll()
    .then((res) => {
      res.prefixes.forEach((folderRef) => {
        // All the prefixes under listRef.
        // You may call listAll() recursively on them.
      });
      res.items.forEach((itemRef) => {
        // All the items under listRef.
        itemRef.getDownloadURL().then((url) => {
          imagesArray.push(url);
          console.log(imagesArray);
        });
      });
    })
    .catch((error) => {
      // Uh-oh, an error occurred!
    });
  // [END storage_list_all]
}