如何将文件从表单添加到 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>

记录的错误是“类型错误：无法读取未定义的属性（读取 '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';

这是“新”v9 版 SDK 的语法，它使用模块化语法。但是你正在尝试调用：

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

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

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

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

另见：

adding a document
v9 的 upgrade guide
一些现有的posts about the error message you got

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

How do I add files from form to Firebase database? Vue js + Vuetify + Firebase

javascript

firebase

vue.js

google-cloud-firestore