javascript - 从 Firebase 上上传的图片中检索 URL

Question

我已将图像上传到 Firebase 存储，但当我尝试检索网址时，我收到“uploaded_image.ref 不是函数”.....

HTML

<form>
<input id="select_Image" type="file" required>
<button type="submit">Upload Image</button>
</form>

JS

let image_url = ""; 

function uploadImage {

  const image = input_image.files[0];
  const path = storage.ref("imagefolder/" + image.name);

  const uploaded_image = path.put(image);
  const the_url = uploaded_image.ref().getDownloadURL();

  image_url = the_url; 
  alert(image_url);

}

Answer 1

put() 方法和getDownloadURL() 方法都需要调用服务器来完成其工作。因此，他们会返回一个 promise ，而您必须等待该 promise 完成才能得到他们的结果。

此外，您只能在图片上传后才能获取其下载 URL。因此，您应该仅在 put() 完成后调用 getDownloadURL()。

代码看起来像这样:

function uploadImage {
  const image = input_image.files[0];
  const path = storage.ref("imagefolder/" + image.name);

  path.put(image).then(function() {
    path.getDownloadURL().then(function(url) {
      alert(url);
    }
  }
}

正如评论中所述，downloadUrl 只能在内部回调中使用。如果您在其他地方使用它，它可能不会具有您想要的值(value)。因此，任何需要下载 URL 的代码都应该位于回调内部，或者从那里调用。

另请参阅:

• Image from Cloud Storage is not redendring in .map list
• Firebase web: upload multiple files to Storage an then download their URLs
• Show a modal after images are uploaded with JS and Firebase