如何使用CDN引入的Firebase 9.5.0版本实现图片上传功能

• 核心依赖版本不匹配：HTML中引入的是Firebase 8.2.2版本的核心库，与JS中导入的9.5.0版本Storage模块大版本不一致，API完全不兼容
• 模块化API调用方式错误：Firebase 9.x采用全新模块化设计，不再支持旧版在storageRef实例上直接调用put()方法的写法，上传方法需要单独导入
• 缺失Firebase应用初始化逻辑：代码中使用的app变量未完成初始化，会额外引发未定义错误

1. 修正HTML依赖引入 #

把原来的8.x版本script替换为9.5.0版本的模块化核心库引入，代码如下：

<script type="module">
  // 先导入初始化方法和核心库
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-app.js";
  // 替换为你的Firebase项目配置，可从Firebase控制台获取
  const firebaseConfig = {
    apiKey: "你的项目API_KEY",
    authDomain: "你的项目AUTH_DOMAIN",
    projectId: "你的项目PROJECT_ID",
    storageBucket: "你的项目STORAGE_BUCKET",
    messagingSenderId: "你的项目SENDER_ID",
    appId: "你的项目APP_ID"
  };
  // 初始化得到app实例
  const app = initializeApp(firebaseConfig);
</script>
<input type="file" id="file"><br><br>
<button id="submit">Enviar</button>

2. 修正JS上传逻辑 #

导入上传专用的uploadBytes方法，替换原来的put()调用，代码如下：

import { getStorage, ref, uploadBytes } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-storage.js";

// 此处的app是上文已经完成初始化的实例
const storage = getStorage(app);

function submit() {
    const file = document.getElementById("file").files[0];
    if(!file) return;
    // 自定义上传路径，示例为上传到images文件夹下保留原文件名
    const storageRef = ref(storage, `images/${file.name}`);
    // 调用独立的uploadBytes方法完成上传
    uploadBytes(storageRef, file).then((snapshot) => {
        console.log('上传成功', snapshot);
    }).catch((error) => {
        console.error('上传失败', error);
    });
}

document.getElementById("submit").addEventListener("click", submit);

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