Firebase存储将图像成功上传到Firebase存储后获得下载URL

Question

这是上传图像并获取下载网址的完整代码图片已成功上传，但未打印下载网址

<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  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(snapshot){
    var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    uploader.value = percentage;

},
function error(err){

},
function complete(){

}
);


});


 </script>

<script>
snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log("pics/1.jpg", downloadURL);
document .writeln(downloadURL);
  });


</script>



</body>
</html>

这是代码的输出

图片上传后，我希望打印下载网址

我也尝试过这种方法

snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log("pics/1.jpg", downloadURL);
  });

此显示错误，如控制台图片所示我应该在此代码中进行哪些更改以打印下载URL这就是我的存储空间

Answer 1

来自文档：

putput(data: Blob | Uint8Array | ArrayBuffer, metadata?: UploadMetadata): UploadTask Uploads data to this reference's location。
可选元数据：UploadMetadata新上传的对象的元数据。
返回UploadTask可用于监视和管理上载的对象。

put方法返回类型为UploadTask的值。 UploadTask包含属性snapshot，因此：

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

Firebase存储将图像成功上传到Firebase存储后获得下载URL

问题描述投票：0回答：1

1个回答

最新问题

Firebase存储将图像成功上传到Firebase存储后获得下载URL

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1