使用Javascript上传Firebase文件

Posted 2021-05-03

我正在尝试使用javascript将文件上传到firebase存储。

var fileButton = document.getElementById("fileButton");
fileButton.addEventListener('change', function(e){
                    e.preventDefault();
                  var file = e.target.files[0];
                  var storageRef = firebase.storage().ref(userID + '/profilePicture/'+file.name);
                  storageRef.put(file);
              });  

上面的代码工作正常，但现在我正在尝试上传表单提交上的图像，这是无效的：

<form>
<input type="file" id="fileButton"/>
<input type="submit" value="push" onsubmit="myFunction()"/>
</form>
//function
function myFunction() {
            var fileButton = document.getElementById("fileButton");
          fileButton.addEventListener('submit', function(e){
                e.preventDefault();
              var file = e.target.files[0];
              var storageRef = firebase.storage().ref(userID + '/profilePicture/'+file.name);
              storageRef.put(file);
          });  
        }

答案

在你的代码中，myFunction()只是将Listener添加到该按钮，而不是真正将文件上传到数据库。你应该做的是：

function myFunction() {
    var fileButton = document.getElementById("fileButton");
    var file = fileButton.files[0];
    var storageRef = firebase.storage().ref(userID + '/profilePicture/'+file.name);
    storageRef.put(file);
}