Firebase Storage Web：如何上传文件答案

【问题标题】：Firebase Storage Web: How to upload a fileFirebase Storage Web：如何上传文件
【发布时间】：2017-05-09 08:01:13
【问题描述】：

我在我的网站上添加了以下功能。我正在使用 Firebase 存储，但由于某种原因，它似乎无法正常工作，我不知道为什么。

当您上传文件时，进度条应显示将文件保存/上传到 Firebase 存储的进度，但事实并非如此。 Firebase 已初始化，我知道它可以工作。

如果有人可以帮助我并告诉我为什么该功能无法按上述方式工作以及如何修复它，我将不胜感激。

function AddMed() {
        var uploader = document.getElementById("uploader");
    var fileButton = document.getElementById("fileButton");
    var email = sessionStorage.getItem("email");
  //Listen for file selection

    fileButton.addEventListener('change', function (e) {
    // Get File 
        var file = e.target.files[0];
    //Create a storage ref

        var storageRef = firebase.storage().ref('file/' + file.name);
    /** folder name will be email, 
    Will have to transfer variable from page to page and files will be .jpeg**/
    //Upload file 

        var task = storageRef.put(file);
    //Update progress bar

        task.on('state_changed',
                function progress(snapshot) {
                var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                uploader.value = percentage;
            },
            function complete() {

                    });
    });

}

【问题讨论】：

上传过程是否正常，您希望进度条正常工作还是整个过程？
@maximilian_cs 整个过程不起作用

标签： web firebase firebase-storage

【解决方案1】：

首先更改安全规则

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth == null;
    }
  }
}

创建文件

<!DOCTYPE html>
<html>
<head>
	<title>Firebase Web Basics</title>

	<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,700" rel="stylesheet">

	<script src="https://use.fontawesome.com/939e9dd52c.js"></script>

	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<div class="mainDiv" align="right">
		<h1 align="left">Firebase File Upload</h1>
		<progress id="uploader" value="0" max="100">0%</progress>
		<input type="file" id="fileButton" value="upload"/>
	</div>



<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "******************************",
    authDomain: "******************************",
    databaseURL: "******************************",
    storageBucket: "******************************",
    messagingSenderId: "******************************"
  };
  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('img/'+file.name);
  var task = storageRef.put(file);
  task.on('state_changed', function progress(snapshot) {
    var percentage = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
    uploader.value = percentage;

  }, function error(err) {


  },function complete() {

  });
});  
  
  
</script>

<script src="fileup.js">
</script>
</body>
</html>

【讨论】：

这比google的例子好：firebase.google.com/docs/storage/web/upload-files
经过三个小时的工作，我找到了这个答案谢谢
基本上，anything 比 google 示例好