v-on 处理程序中的错误：“TypeError：无法读取未定义的属性‘文件’”

Question

我正在尝试上传带有Vuetify、Laravel 和Axios 的照片

我想点击上传按钮，以便Axios 的post 方法将选择的文件发送到服务器

v-file 输入：

<v-file-input :rules="rules"
    accept="image/png, image/jpeg, image/bmp"
    placeholder=" تغیر تصویر پروفایل"
    v-model="files"
    prepend-icon="mdi-camera">
</v-file-input>

v-btn:

<v-btn class="mx-2" fab dark small color="deep-purple" @click="updateProfile">
    <v-icon dark>mdi-cloud-upload</v-icon>
</v-btn>

数据：

data() {
    return {
        rules: [
            value => !value || value.size < 2000000 || 'حجم عکس بسیار زیاد است !',
        ],
        profile:[],
        fieldName:'',
        files:[]
    }
},

Upload Method

updateProfile: () => {
    let formData = new FormData();
    formData.append('image',this.files);
    axios.post('/api/user/avatar/'+localStorage.getItem('id'), formData).then(res => {
        this.Change_Pic(res.data.src)
    }).catch(err => {});
},

Answer 1

由于如何定义上传函数而发生错误，更改上传函数问题解决！

代码更改自：

updateProfile: () => {
    let formData = new FormData();
    formData.append('image',this.files);
    axios.post('/api/user/avatar/'+localStorage.getItem('id'), formData).then(res => {
        this.Change_Pic(res.data.src)
    }).catch(err => {});
},

收件人：

updateProfile: function() {
    let formData = new FormData();
    formData.append('image',this.files);
    axios.post('/api/user/avatar/'+localStorage.getItem('id'), formData).then(res => {
        this.Change_Pic(res.data.src)
    }).catch(err => {});
},