如何将文件从表单添加到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数据库，你能解释一下我是如何使用Firebase的吗?

我的npm版本是8.3.1(我不能更新它的atm)，这是一个问题吗?

更新:

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

Answer 1

您正在像这样导入Firestore:

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

这是"new"的语法SDK的v9版本，它使用模块化语法。但当你试图打电话:

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

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

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

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

也看到:

• 关于添加文档的Firebase文档
• v9
升级指南
• 一些关于你得到的错误信息的现有帖子