我希望在图像上传到Firebase存储后立即打印下载URL

时间:2020-02-07 14:59:00

标签: javascript html firebase firebase-storage

我希望在成功上传图像后打印下载URL 请注意,上传文件没有问题

<html>
    <head>
        <title> firebase save</title>
        <style media="screen">

        body{
            display : flex;
            min-height: 100vh;
            width : 100%;
            padding : 0;
            margin:0;
            align-items: center;
            justify-content: center;
            flex-direction: column;


                    }


            #uploader{
                -webkit-appearance: none;
                appearance: none;
                width: 50%;
                margin-bottom: 10px;

            }        
        </style>
    </head>
    <body>

<progress value="0" max = "100" id="uploader" > 0%</progress>
<input type = "file" value="upload" id="fileButton" />
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
 <script>
   // Initialize Firebase
   var config = {
 //firebase initialization 
};

   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);   // <--- See the difference here


task.on('state_changed' , 

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



},
function error(err){

},
function complete(){

}
);


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



 </script>

<script>


</script>




</body>
</html>

我希望打印下载网址

控制台显示错误

未捕获的TypeError:无法读取未定义的属性'ref' 这是我的Firebase存储的外观 enter image description here

一旦图像成功上传,请帮助我打印下载URL

0 个答案:

没有答案