Javascript Firebase错误Firebase存储：索引0处的'put'中的参数无效：应为Blob或文件

我正试图将一个图像从本地设备上传到Firebase，但是当我打开应该这样做的网页时，我得到了这个错误，它不起作用。 当我打开页面时，我在点击提交按钮之前收到了这个错误

谢谢

<div id="filesubmit">
  <input type="file" id="caricaFile" class="file-select" accept="image/*"/>
  <button class="file-submit">SUBMIT</button>
</div>
          try{// Initialize Firebase
          var config = {
            apiKey: "AIzaSyA5-N-IEZDs9XYhmMCpSvyByp0OlTR-bhs",
            authDomain: "hackathon-76f01.firebaseapp.com",
            databaseURL: "https://hackathon-76f01.firebaseio.com",
            projectId: "hackathon-76f01",
            storageBucket: "hackathon-76f01.appspot.com",
            messagingSenderId: "1040124036693"
          };

          firebase.initializeApp(config);

          var storageRef = firebase.storage().ref(); // use the Blob or File API

        // Create a reference to 'mountains.jpg'
        var mountainsRef = storageRef.child('mountains.jpg');

        // Create a reference to 'images/mountains.jpg'
        var mountainImagesRef = storageRef.child('images/mountains.jpg');

        var file = document.getElementById("caricaFile").value

        storageRef.put(file).then(function(snapshot) {
          console.log('Uploaded a blob or file!');
        });

        var metadata = {
          contentType: 'image/jpeg',
        };

        // Upload the file and metadata
        var uploadTask = storageRef.child('images/mountains.jpg').put(file, metadata);
         }
        catch(err){
        console.log("errore");
        console.log(err);
        } 

提交
尝试{//初始化Firebase
变量配置={
apiKey：“AIzaSyA5-N-IEZDs9XYhmMCpSvyByp0OlTR-bhs”，
authDomain:“hackathon-76f01.firebaseapp.com”，
数据库URL:“https://hackathon-76f01.firebaseio.com",
projectId:“hackathon-76f01”，
storageBucket:“hackathon-76f01.appspot.com”，
messagingSenderId：“1040124036693”
};
firebase.initializeApp（配置）；
var storageRef=firebase.storage（）.ref（）；//使用Blob或文件API
//创建对“mountains.jpg”的引用
var mountainsRef=storageRef.child（'mountains.jpg'）；
//创建对“images/mountains.jpg”的引用
var mountainImagesRef=storageRef.child（'images/mountains.jpg'）；
var file=document.getElementById（“caricaFile”）.value
storageRef.put（文件）.then（函数（快照）{
log（'上载了一个blob或文件！'）；
});
变量元数据={
contentType:“图像/jpeg”，
};
//上传文件和元数据
var uploadTask=storageRef.child（'images/mountains.jpg'）.put（文件，元数据）；
}
捕捉（错误）{
控制台日志（“错误”）；
控制台日志（err）；
} 

我不知道try/catch块是否是必需的，但我想它应该是这样工作的：

<div id="filesubmit">
   <input type="file" id="caricaFile" class="file-select" accept="image/*"/>
   <button class="file-submit" onclick="fileUpload(event)">SUBMIT</button>
</div>

      try{// Initialize Firebase
      var config = {
        apiKey: "AIzaSyA5-N-IEZDs9XYhmMCpSvyByp0OlTR-bhs",
        authDomain: "hackathon-76f01.firebaseapp.com",
        databaseURL: "https://hackathon-76f01.firebaseio.com",
        projectId: "hackathon-76f01",
        storageBucket: "hackathon-76f01.appspot.com",
        messagingSenderId: "1040124036693"
      };

      firebase.initializeApp(config);
        function fileUpload(event){
            var storageRef = firebase.storage().ref(); // use the Blob or File API
            var file=event.target.files[0]
            storageRef.put(file).then(function(snapshot) {
            console.log('Uploaded a blob or file!');
            });

            var metadata = {
            contentType: 'image/jpeg',
            };

            // Upload the file and metadata
            var uploadTask = storageRef.child('images/mountains.jpg').put(file, metadata);
        }

     }
    catch(err){
    console.log("errore");
    console.log(err);
    } 

提交
尝试{//初始化Firebase
变量配置={
apiKey：“AIzaSyA5-N-IEZDs9XYhmMCpSvyByp0OlTR-bhs”，
authDomain:“hackathon-76f01.firebaseapp.com”，
数据库URL:“https://hackathon-76f01.firebaseio.com",
projectId:“hackathon-76f01”，
storageBucket:“hackathon-76f01.appspot.com”，
messagingSenderId：“1040124036693”
};
firebase.initializeApp（配置）；
函数文件上载（事件）{
var storageRef=firebase.storage（）.ref（）；//使用Blob或文件API
var file=event.target.files[0]
storageRef.put（文件）.then（函数（快照）{
log（'上载了一个blob或文件！'）；
});
变量元数据={
contentType:“图像/jpeg”，
};
//上传文件和元数据
var uploadTask=storageRef.child（'images/mountains.jpg'）.put（文件，元数据）；
}
}
捕捉（错误）{
控制台日志（“错误”）；
控制台日志（err）；
} 

什么是

caricaFile

？是否有一个HTML表单与此代码一起使用？@DougStevenson我编辑并添加了相关的HTML代码，在代码运行之前，您是否使用该表单选择了要上载的文件？请您解释一下如何操作？我知道如何将函数附加到按钮，但不知道如何添加fileSUBMIT，然后在脚本中：function myfunction（）{//all things what your do}示例：现在我在单击submit按钮后遇到了相同的错误我刚刚检查了我以前是如何做的：html中的更改：onclick=“myfunction（）”javascript中的更改：var file myfunction（event）{file=event.target.files[0]}现在“file”将是一种文件类型。我用这个命令解决了这个问题，得到了这个文件：“document.getElementById（“caricaFile”）.files[0]”。谢谢你的帮助！