如何从 Firebase 存储中获取图像文件名？

Posted 2023-03-22

【中文标题】如何从 Firebase 存储中获取图像文件名？

【英文标题】：How to get image filename from Firebase Storage?

【发布时间】：2021-11-30 20:55:39

【问题描述】：

我正在使用以下内容：

const [allImages, setImages] = useState([]);

 
  const getFromFirebase = () => 
    //1.
    let storageRef = storage.ref(user1);
    //2.
    storageRef.listAll().then(function (res) 
        //3.
        res.items.forEach((imageRef) => 
          console.log(imageRef);
          imageRef.getDownloadURL().then((url) => 
              //4.
              setImages((allImages) => [...allImages, url]);
          );
        );
        
      )
      .catch(function (error) 
        console.log(error);
      );
      console.log(allImages);
  ;

然后显示通过：

<button onClick=getFromFirebase>Show</button><br/><br/>
             <div id="photos">
     allImages.map((image) => 
        return (
           <div key=image className="image">
              <img className="uploadedfile" src=image  />
              <button className="buttondelete" onClick=() => deleteFromFirebase(image)>
               Delete
              </button>
           </div>

我意识到这是返回图像 URL 的 getDownloadURL，但我如何也返回图像文件名？

【参考方案1】：

要获取文件名，您可以使用getMetadata:

imageRef.getMetadata().then(metadata => 
  // do something with metadata.name
);

【讨论】：

好的，太好了 - 那么我将如何将 metadata.name 与 image src (getDownloadURL) 结合起来 - 因为我只想显示文件名，然后将其链接到上传的文件跨度>

【参考方案2】：

您可以使用“getMetaData”方法。

import  getStorage, ref, getMetadata  from "firebase/storage";

// Create a reference to the file whose metadata we want to retrieve
const storage = getStorage();
const forestRef = ref(storage, 'images/forest.jpg');

// Get metadata properties
getMetadata(forestRef)
  .then((metadata) => 
  // Metadata now contains the metadata for 'images/forest.jpg'
)
.catch((error) => 
   // Uh-oh, an error occurred!
);

你可以参考Firebase Docs - File Metadata更好的理解