Firebase教程中遇Uncaught ReferenceError: uploadFile未定义错误求助

这个错误的核心原因是浏览器触发onchange事件时，找不到全局作用域下的uploadFile函数，通常和脚本加载顺序或作用域绑定有关，以下是具体修复方案：

1. 调整脚本加载顺序 #

确保app.js在DOM元素之后加载，或用defer属性保证脚本在DOM解析完成后执行，避免DOM元素先渲染但函数还未定义的情况：

• 方式一：将脚本放在</body>标签之前（推荐）

<body>
    <h3>Storage Uploads</h3>
    <input type="file" onchange="uploadFile(this.files)" />
    <hr />
    <img id="imgUpload" src="" width="100vw" />
    <!-- 先加载Firebase SDK，再加载自定义脚本 -->
    <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-storage.js"></script>
    <script src="app.js"></script>
</body>

• 方式二：给脚本添加defer属性（可放在<head>中）

<head>
    <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js" defer></script>
    <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-storage.js" defer></script>
    <script src="app.js" defer></script>
</head>

2. 确保函数处于全局作用域 #

如果你的app.js以ES模块方式加载（比如加了type="module"），函数会被限制在模块作用域内，此时需要把uploadFile绑定到window对象，让全局可以访问：

document.addEventListener("DOMContentLoaded", (event) => {
  const app = firebase.app();
  console.log(app);
});

// 绑定到window对象，确保全局可访问
window.uploadFile = function(files) {
  const storageRef = firebase.storage().ref();
  const horseRef = storageRef.child("horse.jpg");

  const file = files.item(0);
  const task = horseRef.put(file);

  task.then((snapshot) => {
    console.log(snapshot);
    // Firebase V9+版本需用getDownloadURL()获取链接，替代旧版的snapshot.downloadURL
    snapshot.ref.getDownloadURL().then(url => {
      document.querySelector("#imgUpload").setAttribute("src", url);
    });
  });
}

3. 修正Firebase API调用 #

注意：你代码中的snapshot.downloadURL是Firebase V8及以下版本的写法，V9+版本需要通过snapshot.ref.getDownloadURL()异步获取下载链接，上面的代码已经修正了这个问题，避免后续出现新的错误。

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