如何将文件从表单添加到 Firebase 数据库？ Vue js + Vuetify + Firebase

Question

这是我第一次同时使用 Vuetify 和 Firebase。

按照教程，我试图将一些数据添加到我在 firebase 中的数据库（不是图像）。

在我的项目中使用 npm 安装 firebase 后，我将其设置在一个单独的 js 文件中，如下所示：

import { initializeApp } from "firebase/app";
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
import { getAnalytics } from "firebase/analytics";

const firebaseConfig = {
  apiKey: "....",
  ...
  ...
};


const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore(app);

在 vue.js 文件中，我拥有包含要添加的数据的新对象的表单，我正在尝试这样做：

模板：

<template>
    <v-dialog max-width="600px">
        <v-btn flat slot="activator" class="success">
            Add new project
        </v-btn>
        <v-card>
            <v-card-title>
                <h1 class="display-1">Add a new project</h1>
            </v-card-title>
                <v-form class="px-3" ref="newProjectForm">
                    <v-card-text>
                        <v-text-field label="Title" v-model="title" prepend-icon="folder" :rules="inputRules"></v-text-field>
                        <v-textarea  :rules="inputRules" label="Information" v-model="content" prepend-icon="edit"></v-textarea>

                    <v-menu>
                        <v-text-field :rules="inputRules" slot="activator" :value="formattedDate" label="Due date" prepend-icon="date_range"></v-text-field>
                        <v-date-picker v-model="due"></v-date-picker>
                    </v-menu>

                    <v-spacer></v-spacer>
                    
                    <v-btn flat class="success mx-0 mt-3" @click="submit">Add project</v-btn>
                    </v-card-text>
                </v-form>
        </v-card>
    </v-dialog>
</template>

脚本：

import format from 'date-fns/format'

import parseISO from 'date-fns/parseISO'

import db from '@/fb'

export default {
    data(){
        return{
            title : "",
            content : "",
            due : null,
            inputRules: [
                v => v.length >= 4 || "Minimum length is 3 characters ",
            ]
        }
    },
    methods:{
        submit(){
            if(this.$refs.newProjectForm.validate()){
                // console.log(this.title,this.content,this.due);
                const project = {
                    title: this.title,
                    content: this.content,
                    due: format(parseISO(this.due), 'eee do MMMM y'),
                    person :'myself',
                    status: 'ongoing'
                }

                db.collection('Listify').add(project).then(() => console.log('added to db'))
            }
        }
    },
 computed: {
    formattedDate () {
      console.log(this.due)
      return this.due ? format(parseISO(this.due), 'eee do MMMM y') : ''
    }
  }}
</script>

记录的错误是“TypeError: Cannot read properties of undefined (reading 'collection')”

我知道我可能以错误的方式导入了某些内容，但我对此很陌生，还没有很好地掌握它。

我想将来自表单的对象上传到 Firebase 数据库，你能解释一下我如何使用 fire base 以及我缺少什么吗？

另外我的 npm 版本是 8.3.1（我无法在 atm 更新它）有问题吗？

更新：

Frank van Puffelen 提供的解决方案有效，但只要我将 firebase 设置在外部 js 文件中，只要我在调用提交方法的文件中粘贴所有内容，我仍然无法让它工作，成功了！

Answer 1

您正在像这样导入 Firestore：

import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';

这是 SDK 的“新”v9 版本的语法，它使用模块化语法。但是你试图打电话：

db.collection('Listify').add(project).then(() => console.log('added to db'))

这是旧版 SDK 的命名空间语法。你不能像那样混合和匹配语法。

在模块化语法中，等效的调用是：

addDoc(collection(db, 'Listify'), project).then(...)

另见：

• adding a document 上的 Firebase 文档
• upgrade guide 用于 v9
• 现有的一些posts about the error message you got