Error in v-on handler: "TypeError: Cannot read property 'files' of undefined"

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 => {});
},

Error in v-on handler: "TypeError: Cannot read property 'files' of undefined"

Error in v-on handler: "TypeError: Cannot read property 'files' of undefined"

laravel

vuejs2

vuetify.js