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

Posted 2023-02-16

【中文标题】当我点击上传按钮时，它给出了一个错误：`TypeError: Cannot read property \'name\' of null`

【英文标题】：When I click on the upload button it gives an error: ` TypeError: Cannot read property 'name' of null`当我点击上传按钮时，它给出了一个错误：`TypeError: Cannot read property 'name' of null`

【发布时间】：2021-05-11 05:27:47

【问题描述】：

**当我点击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)
            
        
       

请帮忙找出错误

【参考方案1】：

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

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

【讨论】：

现在是新错误（ReferenceError: fileref is not defined

它应该是 fileRef 而不是 fileref 因为你声明变量的名称

谢谢，但我比较松...请帮助花药错误 TypeError: _this.resetForm is not a function

那是因为你没有在你的方法中定义任何名为 resetform 的方法

resetForm() this.$refs.form.reset() ，像这样？