使用 Javascript 上传 Firebase 文件答案

【问题标题】：Firebase File Upload Using Javascript使用 Javascript 上传 Firebase 文件
【发布时间】：2021-02-23 03:49:11
【问题描述】：

我正在尝试使用 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);
          });  
        }

【问题讨论】：

标签： javascript firebase dom-events firebase-storage

【解决方案1】：

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

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

【讨论】：