如何获得对 firebase 图像的引用以便能够删除它?

IT技术 javascript reactjs firebase firebase-storage
2021-04-30 05:56:36

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

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}`)
}

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

我正在映射所有图像,对于每个图像,我都附加了删除功能并将照片作为参数传递。然而这只是返回给我这个

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 确实引用了路径,但它在最后切断了一些路径。加上我真的不想拼接它来找到图像。必须有一个简单的方法来设置参考?

1个回答

您可以结合ResponseReference在另一个对象then后回调catch

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))
}