网站上传图片至Firebase Storage时报firebase未定义错误如何解决

问题根源 #

你使用的是Firebase JS SDK v9模块化版本，该版本废弃了v8及更早版本的全局firebase命名空间调用方式，你代码中firebase.storage().ref()是v8的旧写法，自然会报firebase is not defined错误。

修复方案 #

首先需要在模块导入部分补全存储相关API的导入，然后替换旧版本的调用语法：

1. 修改后的第一部分JS代码（带<script type="module">的那一段） #

<script type="module">
  // 导入需要的API，新增ref、uploadBytesResumable导入
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js";
  import { getStorage, ref, uploadBytesResumable } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-storage.js";

  const firebaseConfig = {
    apiKey: "AIzaSyDAmerIVJpJVQMbpX1aTPHTkKuT1ULM_Gw",
    authDomain: "aboutinkjet-e6e0c.firebaseapp.com",
    projectId: "aboutinkjet-e6e0c",
    storageBucket: "aboutinkjet-e6e0c.appspot.com",
    messagingSenderId: "7922742945",
    appId: "1:7922742945:web:124d23113a55778727e2e0",
    measurementId: "G-4SETNPDNPB"
  };

  // 初始化Firebase
  const app = initializeApp(firebaseConfig);
  const storage = getStorage(app);

  var uploader=document.getElementById("uploader");
  var fileButton = document.getElementById("inpFile");
  fileButton.addEventListener('change',function(e){
      var file=e.target.files[0];
      // 替换旧的storageRef创建方式
      const storageRef = ref(storage, "Picture/"+file.name);
      // 替换旧的put方法为uploadBytesResumable，支持进度监听
      const uploadTask = uploadBytesResumable(storageRef, file);

      uploadTask.on('state_changed',
        (snapshot) => {
          const percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
          uploader.value = percentage;
        },
        (error) => {
          console.log(error.message);
        },
        () => {
          console.log("Upload Complete!!!");
          // 如果需要获取上传后的文件地址，可在这里调用getDownloadURL(uploadTask.snapshot.ref)获取
        }
      );
  });
</script>

2. 其余代码无需改动 #

你的CSS、HTML代码以及第二部分图片预览的JS代码逻辑没有问题，不需要调整。

内容的提问来源于stack exchange，提问作者TesTer