从 Firebase 存储中获取 getDownloadURL() 字符串

Question

我正在尝试获取 getDownloadURL() 应该返回的 url。然而，它实际上是返回给我的数据，例如this。

我已经设法在 html 上显示它，但是我的真正目的是获取可以在我发布的图像上看到的 URL，这样我就可以获取它并将其保存在我的 Firestore 数据库中。但是我不知道如何获得该值。 这是我的片段：

    getImgFromServer(imgName: string): string {
    let img;
    let downloadIMG;
    img = firebase.storage().ref("/imgs/" + imgName).getDownloadURL();
    let ref= firebase.storage().ref();
    const imgRef = ref.child("/imgs/" + imgName);
    imgRef.getDownloadURL().then(function(url){
      downloadIMG=url;
      img = downloadIMG;
      console.log("MY URL " + downloadIMG)

    })
    console.log("img")
    console.log(img)
    return img
  }

调试此日志时，此代码打印我要使用的 URL：

console.log("MY URL " + downloadIMG)

我的网址https://firebasestorage.googleapis.com/v0/b/static-epigram-189720.appspot.com/o/imgs%2Fmovie-1543700476524.jpg?alt=media&token=5550a552-1ed0-488e-beed-a6bc82791293

然而这个，打印来自image的数据：

console.log(img)

我想单独返回 URL，以便我可以使用它。

编辑

现在我获得了 URL，我想将它保存在 Cloud Firestore 中，这样我就可以使用 HTML 上的 URL 来显示图片。 这是存储图像名称的函数：

createPublic(id,img){
this.firestore.doc(`public/${id}`).set({
     img,
    });
}

有了Frank给出的答案，现在我可以获取URL了，所以我只是用它来获取URL并使用以下功能，更新我刚刚上传的文档。

    async updateImg(img,idPubli){
    const imgToUpdate= await this.imgServ.getImgFromServer(img);
    this.imgServ.updateImgFromServer(imgToUpdate,idPubli)
  }

     updateImgFromServer(image,id){
      this.firestore.doc(`public/${id}`).set({
        img:image,
      });
     }

但它似乎不起作用。我可以想象这可能是因为在执行 updateImg() 之前尚未上传图像或文档，但我对异步函数有点陌生，所以我无法获得解决方案现在。

如果有帮助，这是我上传图片的功能和上传图片的功能。

 submit() {
    this.imgServ.uploadImage();
    this.viewCtrl.dismiss({data});
  }

在dismiss函数之后，我收集所有数据，然后调用createPublic()函数。

 uploadImage() {
    this.image = 'movie-' + new Date().getTime() + '.jpg';
    let storageRef: any,
      parseUpload: any;
    return new Promise((resolve, reject) => {
      storageRef = firebase.storage().ref('imgs/' + this.image);
      parseUpload = storageRef.putString(this.cameraImage, 'data_url');


      parseUpload.on('state_changed', (_snapshot) => {
        // We could log the progress here IF necessary
        // console.log('snapshot progess ' + _snapshot);
      },
        (_err) => {
          reject(_err);
        },
        (success) => {
          resolve(parseUpload.snapshot);
        });
    });
  }

Answer 1

由于下载 URL 是通过调用服务器生成的，它可能需要一些时间才能可用。而且您不能让代码等待该值可用。这就是为什么getDownloadURL() 返回一个promise，然后在从服务器获取下载URL 后调用它的then()。此 URL 仅在回调中可用，因为回调之后的代码在服务器返回下载 URL 之前运行（因此在调用 then() 回调之前）。

一种常见的方法是只传递承诺，并在需要值时使用它的then()。所以：

const imgRef = ref.child("/imgs/" + imgName);
const downloadUrl = imgRef.getDownloadURL();

...

downloadUrl.then(function(url){
  console.log("MY URL " + url)
})

现代环境中的替代方法是使用新的async/await 关键字。这些将上述基于承诺的方法包装在一些语法糖中：

async getImgFromServer(imgName: string): string {
    let img;
    let downloadIMG;
    img = firebase.storage().ref("/imgs/" + imgName).getDownloadURL();
    let ref= firebase.storage().ref();
    const imgRef = ref.child("/imgs/" + imgName);
    const downloadURL = await imgRef.getDownloadURL()
    return downloadURL
}

然后你称之为：

const downloadURL = await getImgFromServer("image name")

另见：

• Async/await - The Modern Javascript Tutorial
• Async function - MDN web docs