在 Firebase 存储上完成上传后如何获取下载 URL答案

【问题标题】：How do i get download URL once upload is done on firebase storage在 Firebase 存储上完成上传后如何获取下载 URL
【发布时间】：2018-12-30 00:12:27
【问题描述】：

我想在图像上传完成后获取下载 URL，然后将 downloadURL 设置为我的 newAds.picLink(object.property) ，但在此代码中，因为上传正在进行中

newAds.update({ picLink: downloadURL });

调用

会引发错误，因为 downloadURL 当前不可用且正在进行中。我已经通过使用 setTimeOut 到 8 秒解决了这个问题，这让图像首先完全上传，然后接收到 downloadURL，但这是不正确的。

一旦图像完全上传，我如何创建一个正确的回调来设置 newAds.picLink = downloadURL？

 addSubmitted.addEventListener('click', e => {
 const newAds = _db.ref(userID).push();
 const newAd = {
 };

const ref = firebase.storage().ref();
const file = $('#exampleInputFile').get(0).files[0];
const name = (+new Date() + '-' + file.name);
const task = ref.child(name).put(file, {contentType: file.type});

function abc() {
    task.snapshot.ref.getDownloadURL().then((downloadURL) => {
        console.log('File available at', downloadURL);
        console.log(downloadURL);
        newAds.update({ picLink: downloadURL });
    });

    task.catch(error => {
        // Use to signal error if something goes wrong.
        console.log(`Failed to upload file and get link - ${error}`);
    });
}

setTimeout(abc,8000);

【问题讨论】：

你在哪里声明newAds？
@AlexIronside 代码更新，一旦点击提交按钮，这一切都会运行

标签： javascript firebase firebase-storage

【解决方案1】：

来自Firebase documentation on uploading a file：

var uploadTask = storageRef.child('images/rivers.jpg').put(file);

// Register three observers:
// 1. 'state_changed' observer, called any time the state changes
// 2. Error observer, called on failure
// 3. Completion observer, called on successful completion
uploadTask.on('state_changed', function(snapshot){
  // Observe state change events such as progress, pause, and resume
  // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
  var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  console.log('Upload is ' + progress + '% done');
  switch (snapshot.state) {
    case firebase.storage.TaskState.PAUSED: // or 'paused'
      console.log('Upload is paused');
      break;
    case firebase.storage.TaskState.RUNNING: // or 'running'
      console.log('Upload is running');
      break;
  }
}, function(error) {
  // Handle unsuccessful uploads
}, function() {
  // Handle successful uploads on complete
  // For instance, get the download URL: https://firebasestorage.googleapis.com/...
  uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log('File available at', downloadURL);
  });
});

所以这注册了一个state_changed 观察者。上传完成后，调用StorageReference.getDownloadURL() 获取下载地址。

【讨论】：

非常感谢@Frank
put() 返回的 UploadTask 也像 Promise 一样工作，所以你可以在其上使用 then() 以在上传完成后继续处理。

【解决方案2】：

put() 返回一个UploadTask，您可以像普通的承诺一样使用它，因为它声明了一个then() 方法：

const task = ref.child(name).put(file, {contentType: file.type});
task.then(snapshot => {
    ref.getDownloadURL().then(...);
});

【讨论】：