如何在上传到 AngularFireStorage 后使用 getDownloadUrl() 检索下载 Url

Question

我已经成功将图像上传到我的 firebase 存储中，但我还想检索 downloadURL 并将其添加到我的 firestore 数据库中。控制台日志记录“url” return 是我想要的 link。但是我在使用它时遇到了问题。

我试过this.profileImage = url但控制台总是return我的错误无法设置未定义的属性'profileImage'。我通过在构造函数上方执行 profileImage 来定义它。

我也试过将整个 firestore 功能放在里面但是控制台将 return 无法读取未定义的属性 'firestore' 我正在使用 Ionic 5。

imageRef.getDownloadURL().then((url)=> {
    this.firestore.collection('users').doc(this.user.id).update({image.url})
       console.log("this is my image" + url)
})

这是我目前拥有的

uploadImage(imageURI) {
    return new Promise<any>((resolve, reject) => {
      let storageRef = firebase.storage().ref();
      const imageRef = storageRef.child('image').child(this.createFileName());
      this.encodeImageUri(imageURI, function (image64) {
        imageRef.putString(image64, 'data_url')
          .then(function (snapshot) {
            console.log(snapshot)
            resolve(snapshot.downloadURL)
            imageRef.getDownloadURL().then((url)=> {
              this.profileImage = url
              console.log(this.profileImage)
              console.log("this is my image" + url)
            })
          }, err => {
            reject(err);
          })
      })
    })
  }

encodeImageUri(imageUri, callback) {
    var c = document.createElement('canvas');
    var ctx = c.getContext("2d");
    var img = new Image();
    img.onload = function () {
      var aux: any = this;
      c.width = aux.width;
      c.height = aux.height;
      ctx.drawImage(img, 0, 0);
      var dataURL = c.toDataURL("image/jpeg");
      callback(dataURL);
    };
    img.src = imageUri;
  };

Answer 1

您的第一个片段看起来非常接近，但您没有保存从 getDownloadUrl() 获得的实际 url。如果你这样做并将它组合到你的 putString() 回调中，你会得到这样的东西：

imageRef.putString(image64, 'data_url')
  .then((snapshot) => {
    imageRef.getDownloadURL().then((url)=> {
        this.firestore.collection('users').doc(this.user.id).update({ "imageUrl": url })
    })
  })

如何在上传到 AngularFireStorage 后使用 getDownloadUrl() 检索下载 Url

How to retrieve download Url using getDownloadUrl() after uploading to AngularFireStorage

firebase

firebase-storage

angular

google-cloud-firestore

ionic5