如何从Firebase Storage中获取存储图片的文件名？

核心修改逻辑 #

Firebase Storage 的 imageRef 实例本身自带 name 属性，存储的就是文件上传时的原始文件名，你只需要把原来存纯URL的逻辑，改成存同时包含URL和文件名的对象即可实现需求。

第一步：修改拉取图片的核心逻辑 #

调整状态存储的结构，拿到下载链接时同步存入文件名：

// 原来存纯URL数组，现在调整为存包含url、fileName的对象数组
const [allImages, setImages] = useState([]);

const getFromFirebase = () => {
  let storageRef = storage.ref(user1);
  storageRef.listAll().then(function (res) {
      res.items.forEach((imageRef) => {
        imageRef.getDownloadURL().then((url) => {
            // 同时存入访问链接、原始文件名，可按需存储ref方便后续删除操作
            setImages((allImages) => [...allImages, {
              url: url,
              fileName: imageRef.name,
              ref: imageRef
            }]);
        });
      });
    })
    .catch(function (error) {
      console.log(error);
    });
};

第二步：修改前端渲染逻辑 #

遍历对象数组取出对应字段渲染即可，也可直接使用预存的ref实现删除功能，无需再通过URL反向查询存储引用：

<button onClick={getFromFirebase}>Show</button><br/><br/>
<div id="photos">
{allImages.map((imageItem) => {
  return (
     <div key={imageItem.url} className="image">
        <img className="uploadedfile" src={imageItem.url} alt={imageItem.fileName} />
        {/* 按需渲染原始文件名 */}
        <p>{imageItem.fileName}</p>
        <button className="buttondelete" onClick={() => deleteFromFirebase(imageItem.ref)}>
         Delete
        </button>
     </div>
  )
})}
</div>

可选优化：批量更新避免多次重渲染 #

当前写法是每获取一张图片就更新一次状态，如果你希望等所有图片资源加载完成后一次性更新，可以用Promise.all批量处理异步请求：

const getFromFirebase = async () => {
  try {
    const storageRef = storage.ref(user1);
    const res = await storageRef.listAll();
    // 批量生成所有图片的查询Promise
    const imagePromiseList = res.items.map(async imageRef => {
      const url = await imageRef.getDownloadURL();
      return {
        url,
        fileName: imageRef.name,
        ref: imageRef
      }
    })
    // 等待所有请求完成后一次性更新状态
    const allImageList = await Promise.all(imagePromiseList);
    setImages(allImageList);
  } catch (error) {
    console.log(error)
  }
}

内容的提问来源于stack exchange，提问作者Paul VI