如何获取对 Firebase 图像的引用以便能够将其删除？

Question

所以我有这个功能来检索我所有的照片

const getPhotos = async () => {
    const storage = firebaseApp.storage()
    let gsReference = storage.refFromURL('gs://my-app/')
    gsReference = gsReference.child(`${id}/${country}`)

    const { items } = await gsReference.listAll()
    const urlPromises = items.map((pr) =>
        pr
            .getDownloadURL()
            .then((url) => fetch(url))
            .catch((error) => error),
    )

    let urls = await Promise.all(urlPromises)
    urls = urls.filter((result) => !(result instanceof Error))
    setPhotos(urls)
}

这一切都很好

现在的问题是当我想删除图像时。我有这个功能

const deletePhoto = (photoRef) => {
    console.log('PHOTO:', photoRef)
    var storage = firebaseApp.storage()
    var storageRef = storage.ref(`${id}/${country}`)
}

问题是我无法知道要删除的图像的引用？

我正在映射所有图像，并为每个图像附加删除功能并将照片作为 arg 传递。但是这只是返回给我这个

body: ReadableStream {locked: false}
bodyUsed: false
headers: Headers {append: function, delete: function, get: function, has: function, set: 
ok: true
redirected: false
status: 200
statusText: ""
type: "cors"
url: "https://firebasestorage.googleapis.com/v0/b/my-app.appspot.com/o/F2DFB6714-8082-4AF9-89…"

它看起来像 url 确实引用了路径，但它在最后切断了一些路径。另外，我真的不想将其拼接起来以找到图像。必须有一种简单的方法来设置参考？？

Answer 1

您可以在catch 之后将Response 和Reference 对象组合到另一个then 回调中。

const getPhotos = async () => {
    const storage = firebaseApp.storage()
    let gsReference = storage.refFromURL('gs://my-app/')
    gsReference = gsReference.child(`${id}/${country}`)

    const { items: references } = await gsReference.listAll()
    const result = references.map(async (reference) => {
        const url = await reference.getDownloadURL();
        let response = null;

        try {
           response = await fetch(url);
        }
        catch(error) {
           response = error;
        }

        return {
           response,
           url,
           reference
        }
      }
    )

    let referencesWithUrls = await Promise.all(result)
    referencesWithUrls = referencesWithUrls.filter((result) => !(result.response instanceof Error))
    setPhotos(referencesWithUrls.map(pr => pr.response))
}