Firebase 存储“getDownloadURL”返回未定义答案

【问题标题】：Firebase storage 'getDownloadURL' is returning undefinedFirebase 存储“getDownloadURL”返回未定义
【发布时间】：2020-07-19 00:31:09
【问题描述】：

我正在尝试将图像添加到 firebase 存储，并使用图像 URL 将数据添加到 firestore。图片正在上传到 Firebase 存储，但如果我使用 getDownloadUrl 方法，它不会返回 URL。它返回此错误：

未捕获的类型错误：无法读取未定义的属性“getDownloadURL”

这就是我获取输入和存储数据的方式：

//Add news to firestore
var storageRef = storage.ref('images');
const addNewsForm = document.querySelector('#addNewsModal');
var user = firebase.auth().currentUser;
addNewsForm?.addEventListener('submit', (e) => {
    e.preventDefault();

    //get user info
    const img = document.getElementById("uploadFile").files[0];
    const imgName = (+new Date()) + '-' + img.name;
    const metadata = { contentType: img.type };


    const title = document.getElementById("inputNewsTitle").value;
    const content = document.getElementById("inputNewsContent").value;
    const publisher = document.getElementById("inputNewsPub").value;

    if (user != null) {
        //Add Images to Firebase Storage
        // Create a child reference
        var imagesRef = storageRef.child(imgName).put(img, metadata);

        imagesRef.snapshot.storageRef.getDownloadURL().toPromise()
            .then(function(url)  {

                console.log('Image Url -> ' + url);
                // document.querySelector('#someImageTagID').src = url;


                db.collection("news").add({
                    newsImage: url,
                    newsTitle: title,
                    newsContent: content,
                    newsPublisher: publisher,
                    timestamp: firebase.firestore.FieldValue.serverTimestamp(),
                    adminUid: user.uid
                })
                    .then(function (docRef) {
                        console.log("Document written with ID: ", docRef.id);

                    })
                    .catch(function (error) {
                        console.error("Error adding document: ", error);
                    });

            }).catch(console.error);
    } else {
        console.log('User is null');
    }


});

从上面的代码；我首先获取图像输入，然后将其发送到 Firebase 存储。然后我传递图像 URL 路径并将其发送到 firebase firestore。

我的存储规则：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

【问题讨论】：

标签： javascript firebase-storage firebase-security

【解决方案1】：

您没有正确使用 Firebase Storage API。首先，这一行：

var imagesRef = storageRef.child(imgName).put(img, metadata);

put() 不返回引用。正如您从 API 文档中看到的那样，它返回一个 UploadTask，它也像一个承诺一样工作。如果要从上传的文件中获取下载 URL，则需要等到上传完成，然后在用于上传文件的同一引用上调用 getDownloadURL，如 documentation 所示。至少，像这样：

const imageRef = storageRef.child(imgName)
imageRef.put(img, metadata)
.then(snapshot => {
    return imageRef.getDownloadURL()
    .then(url => {
        // url is the download URL
    })
})
.catch(error => {
    // deal any errors
})

您的安全规则在此处无关紧要，因为您显示的是 Cloud Firestore，而不是 Cloud Storage。它们是具有不同规则的不同产品。您需要注意您的存储规则。

【讨论】：