Firebase使用存储将ImageUrl发布到DB时会延迟，这导致我的推动方法在尝试在数据库中添加新数据时会破裂

Question

我正在创建一个称为testdata的对象，其中包含不同的属性。这些属性之一是图片属性，我可以让用户上传图像，然后使用存储存储将图像存储在Firebase中。但是，当我尝试使用 firebaseRef.push(testData)... => { ... }我得到这个错误：

firebase-storage.js：3476未接收错误：参考。push失败：第一 参数包含属性"图片"

中的未定义

下面是我的testData对象的样子：

var testData = {
	  "Name" : name,
	  "Phone" : phone.value,
	  "Picture" : downloadURL,
	  "q1": q1.value,
	  "q2": q2.value,
	  "q3": q3.value
	  };

但是，如果我等待一秒钟，然后再单击"提交"按钮，将testData推到firebase，则可以正确执行并且一切都可以。似乎从上载的图像发送到firebase存储并形成downloadURL的情况下，我将作为字段保存，以便我知道与哪个键相关联。任何人都知道为什么我有这个奇怪的错误，首先将保存到firebase的尝试不起作用，然后您等待一秒钟然后重试，然后它正确执行

Answer 1

尝试以这种方式。

 uploadTask.on('state_changed', function(snapshot){
       var percentageUploaded = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; //check if its' 100% then get the download url like below,
          if(percentageUploaded ==100){
            storageRef.getDownloadURL().then(function(url) {
                //here you'll get the download url once the file is uploaded.
                var testData = {
                     "Name" : name,
                     "Phone" : phone.value,
                     "Picture" : url,
                     "q1": q1.value,
                     "q2": q2.value,
                     "q3": q3.value,
                     "Timestamp": firebase.database.ServerValue.TIMESTAMP
                 };
          //then do your push to the firebase
          firebaseRef.push(testData).then((snap) => {
              console.log("pushed to firebase");
           });
              });
         }   
    });

请参阅此JSFIDDLE示例

Answer 2

您应该利用.put()返回的承诺

例如：

firebase.storage().ref('path').put( /* file */ ).then(
  snapshot => {
    firebase.database()
      .ref('path')
      .set({ 
        name: 'name',
        downloadURL: snapshot.downloadURL,
        // other properties
      })
  },
  error => {
    // Handle potential errors
  }
)

这确保文件已上传到数据库更新