我无法使用 Vue.js 将任何文件添加到 Firebase 存储

Question

<template>
  <div>
    <input type="file" id="dosya" @change="putDesign()" />
  </div>
</template>

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

const firebaseConfig = {
  apiKey: ,
  authDomain: ,
  databaseURL: ,
  projectId: ,
  storageBucket: ,
  messagingSenderId: ,
  appId: ,
};

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

export default {
  data() {
    return {
      fileName: "",
    };
  },
  methods: {
    putDesign() {
      this.fileName = document.getElementById("dosya").files[0].name;
      const designRef = ref(storage, "design/" + this.fileName);
      designRef.put(this.fileName);
    },
  },
};
</script>

您好朋友，我正在尝试将文件添加到 Firebase 存储，但它给了我这个错误：designRef 不是一个函数。我也尝试了一些在互联网上找到的其他方法，但我无法做到。如何将文件添加到 Firestore 存储？

Answer 1

模块化 SDK 没有 put() 方法。您需要使用uploadBytes。此外，必须传递文件本身，而不仅仅是文件名：

const file = document.getElementById("dosya").files[0]
this.fileName = file.name;
const designRef = ref(storage, "design/" + this.fileName);

uploadBytes(designRef, file).then((snapshot) => {
  console.log('Uploaded:', file.name);
});