Firebase 存储 getDownloadUrl 不是函数

Question

我正在开发一个带有 firebase 的 vue 应用程序，我已经提到了 similar 问题，但没有找到任何解决我的问题的方法。 我想要做的是将下载 URL 存储到我的事件数据库中。 我的代码：

var stRef = st.ref(`event-photos/${eventId}`) // st is firebase.storage()
var upTask = stRef.put(this.fileBlob)
upTask.on('state_changed', snapshot => {
  this.uploadValue = (snapshot.bytesTransferred/snapshot.totalBytes)*100
  }, error => {
  console.log(error.message)
  }, () => {
    upTask.snapshot.ref.getDownloadUrl().then(url => {
      db.collection('events').doc(eventId).set({
        image_url: url
      }).then(() => {
        alert('Event creation successful')
      }).catch(error => {
        alert(error.message)
      })
   })
})

我已从this 页面获取代码（请参阅注册事件处理程序的示例）。 我可能做错了什么？

Answer 1

我变了

var stRef = st.ref(`event-photos/${eventId}`)
var upTask = stRef.put(this.fileBlob)

到

var upTask = st.ref().child(`event-photos/${eventId}`).put(this.fileBlob)

我正在获取带有该功能的 downloadUrl。所以我想我们不能把路径放在 ref 中，而是我们必须使用 child。

Answer 2

我建议您使用返回 Promise 的 then() 方法，而不是使用 on() 侦听器，以便链接异步任务返回的不同 Promise（即 getDownloadUrl() 和 set() )。

因此，以下内容应该可以解决问题：

  var stRef = st.ref(`event-photos/${eventId}`); // st is firebase.storage()
  var upTask = stRef.put(this.fileBlob);

  upTask
    .then(snapshot => {
      return snapshot.ref.getDownloadUrl();
    })
    .then(url => {
      return db
        .collection('events')
        .doc(eventId)
        .set({
          image_url: url
        });
    })
    .catch(error => {
      alert(error.message);
    });