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

标签： laravelvuejs2vuetify.js

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