firebase - 当我点击上传按钮时，它给出了一个错误：`TypeError: Cannot read property 'name' of null`

Question

**当我单击upload按钮时，它会出现错误：TypeError: Cannot read property 'name' of null

形式

<form class="form" @submit.prevent="upload">
<input required name="name" v-model="name" placeholder="Name" type="text" autocomplete="off">
<input required name="email" v-model="email" placeholder="E-mail" type="email" autocomplete="off">
    <input required name="phone" v-model="phone" placeholder="[phone]"                                                                                                            maxlength=13                                                                                                        minlength=13                                                                                                                                                                                                                                                      type="phone" autocomplete="off">
    <textarea required name="message" v-model="message" rows="4" placeholder="Message" autocomplete="off"></textarea>
    <div >
    <button class="button" @click="upload">
    <div >   
    <img class="upload" src="@/img/upload.png"></div>   
    Upload
    </button> </div>
    <button class="button">Send</button>
    </form>

脚本

import { usersCollection, storage } from '../../firebase/init'
export default {
    data() {
        
        return {
            name: '',
            email: '',
            message: '',
            phone:'',
            file: null,
        }
    },
    methods: {

        async upload() {
            try {
                 const fileRef = 'uploads/files/' + this.file.name
                 const snapshot = await storage.ref(fileRef).put(this.file)


                let data = {

                    name: this.name,
                    email: this.email,
                    message: this.message,
                    phone: this.phone,
                    image: fileref
                }
            

            const doc = await usersCollection.add(data)

            await this.resetForm()
            
            } catch(e) {
                console.log(e)
            }
        }
    }   
}

请帮助找到错误

标签： firebasevue.jsgoogle-cloud-firestorevuejs2vuex

Answer 1

原因是您试图从不是对象的文件变量中读取名称属性

data() {
        
        return {
            name: '',
            email: '',
            message: '',
            phone:'',
            file: {}, // changed null to {}
        }
    },