Vue.js向Firebase Storage上传文件报错designRef不是函数如何解决

• 若使用Vue3项目，Vue内置的ref响应式API和Firebase Storage导入的ref命名冲突，导致创建的不是预期的存储引用对象，触发类型错误
• Firebase v9+ 为模块化SDK，存储引用本身没有put方法，需要导入专用的上传方法执行上传操作
• 原代码上传时传入的是文件名字符串，而非用户选中的真实File文件对象，无法传输实际文件内容
• 冗余使用原生DOM API获取文件元素，不符合Vue开发规范

<template>
  <div>
    <input type="file" @change="putDesign($event)" />
  </div>
</template>

<script>
import { initializeApp } from "firebase/app";
import { getStorage, ref as storageRef, uploadBytes, getDownloadURL } from "firebase/storage";

// 替换为你自己Firebase项目的实际配置
const firebaseConfig = {
  apiKey: "你的apiKey",
  authDomain: "你的authDomain",
  databaseURL: "你的databaseURL",
  projectId: "你的projectId",
  storageBucket: "你的storageBucket",
  messagingSenderId: "你的messagingSenderId",
  appId: "你的appId",
};

const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

export default {
  data() {
    return {
      uploadFile: null,
      fileUrl: ""
    };
  },
  methods: {
    async putDesign(e) {
      // 直接从事件对象获取选中的文件
      this.uploadFile = e.target.files[0];
      if (!this.uploadFile) return;
      // 创建存储引用，重命名后避免和Vue的ref冲突
      const designRef = storageRef(storage, "design/" + this.uploadFile.name);
      try {
        // 调用上传方法传入文件对象
        const uploadResult = await uploadBytes(designRef, this.uploadFile);
        // 上传完成后可获取文件访问链接
        this.fileUrl = await getDownloadURL(uploadResult.ref);
        console.log("上传成功，文件地址：", this.fileUrl);
      } catch (err) {
        console.error("上传失败：", err);
      }
    },
  },
};
</script>

• 如果是Vue2项目，不存在ref命名冲突的问题，也可以直接用ref创建存储引用
• 如果需要监听上传进度、实现暂停续传功能，可将uploadBytes替换为uploadBytesResumable方法使用
• 上传前请确保你的Firebase Storage的安全规则已经配置为允许当前用户上传文件，避免权限报错

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