Javascript 上传图像时如何显示下载url

这段代码成功上载了文件，但一旦完成，下载url就不会显示

控制台显示错误

<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
 <script>

   var config = {
 // Initialize Firebase
};

   firebase.initializeApp(config);
   var snapshot;

var  uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
fileButton.addEventListener('change' , function(e) {

var file= e.target.files[0];
var storageRef = firebase.storage().ref('pics/' + file.name);

var task = storageRef.put(file);   


task.on('state_changed' , 

function progress(){
    var percentage = (task.snapshot.bytesTransferred / task.snapshot.totalBytes) * 100;
    uploader.value = percentage;



},
function error(err){

},
function complete(res)
{ 
    console.log("Complete Response :" + res);

     }
);


});
snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log("File available at", downloadURL);
  });



 </script>

变量配置={
//初始化Firebase
};
firebase.initializeApp（配置）；
var快照；
var uploader=document.getElementById（'uploader'）；
var fileButton=document.getElementById（'fileButton'）；
fileButton.addEventListener（'change'，函数（e）{
var file=e.target.files[0]；
var storageRef=firebase.storage（）.ref（'pics/'+file.name）；
var task=storageRef.put（文件）；
task.on（'state_changed'，
功能进展（）{
变量百分比=（task.snapshot.bytesttransfered/task.snapshot.totalBytes）*100；
uploader.value=百分比；
},
函数错误（err）{
},
功能完成（res）
{ 
console.log（“完整响应：+res”）；
}
);
});
snapshot.ref.getDownloadURL（）.then（函数（downloadURL）{
log（“文件位于”，下载URL）；
});

*我希望在上传文件后打印下载链接*

控制台显示错误

解决方案： 您需要在代码中稍作修改

参考火基：

// File or Blob named mountains.jpg
var file = ...

// Create the file metadata
var metadata = {
  contentType: 'image/jpeg'
};

// Upload file and metadata to the object 'images/mountains.jpg'
var uploadTask = storageRef.child('images/' + file.name).put(file, metadata);

// Listen for state changes, errors, and completion of the upload.
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
  function(snapshot) {
    // 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) {

  // A full list of error codes is available at
  // https://firebase.google.com/docs/storage/web/handle-errors
  switch (error.code) {
    case 'storage/unauthorized':
      // User doesn't have permission to access the object
      break;

    case 'storage/canceled':
      // User canceled the upload
      break;

    ...

    case 'storage/unknown':
      // Unknown error occurred, inspect error.serverResponse
      break;
  }
}, function() {
  // Upload completed successfully, now we can get the download URL
  uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log('File available at', downloadURL);
  });
});

---

嗨，瓦伦，请共享控制台响应（错误）。关于如何处理下面的问题------------------------------------函数错误（err）{}，函数完成（）{}请尝试添加：-------------------------------------函数完成（res）{console.log（“完成响应：+res）；}-------------------------和共享控制台日志修改完成并更新，但我仍然没有得到预期的输出。我已经共享了答案，请检查并尝试实现它。如果需要，请分享您的评论，我们将尽力提供进一步帮助。继续反复发布相同的问题可能会禁止您使用堆栈溢出。如果你在问题上的第一篇文章没有给你带来你需要的帮助，那么继续跟进。澄清、提问、互动，但不要简单地重复同样的问题。请参阅和。我使用了第二个Ref Firebase方法，但它也显示了一个错误**未捕获引用错误：未定义快照**，并且进度条也不工作。请帮助

task.on（'state_changed'，function progress（）{var percentage=（task.snapshot.bytesttransfered/task.snapshot.totalBytes）*100；uploader.value=percentage；}，函数错误（err）{}，函数完成（res）{console.log（“文件可在“+res”）；}，函数（）{snapshot.ref.getDownloadURL（）。然后（函数（downloadURL）{console.log（“文件可在”，downloadURL）；document.writeln（downloadURL）；}）此代码显示错误无效参数计数有一个声明，storagRef的初始化丢失请帮助我
// File or Blob named mountains.jpg
var file = ...

// Create the file metadata
var metadata = {
  contentType: 'image/jpeg'
};

// Upload file and metadata to the object 'images/mountains.jpg'
var uploadTask = storageRef.child('images/' + file.name).put(file, metadata);

// Listen for state changes, errors, and completion of the upload.
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
  function(snapshot) {
    // 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) {

  // A full list of error codes is available at
  // https://firebase.google.com/docs/storage/web/handle-errors
  switch (error.code) {
    case 'storage/unauthorized':
      // User doesn't have permission to access the object
      break;

    case 'storage/canceled':
      // User canceled the upload
      break;

    ...

    case 'storage/unknown':
      // Unknown error occurred, inspect error.serverResponse
      break;
  }
}, function() {
  // Upload completed successfully, now we can get the download URL
  uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log('File available at', downloadURL);
  });
});