javascript - 图片未在 Vue Js Laravel 中上传

Question

我在 Laravel Vue 中上传图片时遇到问题。我没有在我的项目中上传图片。这是我的代码

<form action="">
    <input type="text" id="firstName" class="form-control" v-model="user.firstName" value="Frankie">
    <input type="text" id="lastName" class="form-control" v-model="user.lastName" value="Apple">
    <select v-model="user.profile.country" v-chosen="user.profile.country" class="option-select">
        <option v-for="(country, key) in countries" :value="key">{{country}}</option>
    </select>
    <input type="file" ref="files" id="imgInp" multiple @change="selectFile">
    <input type="button" class="button button__primary button__agree" value="Confirm" @click="submit">
</form>

<script>

    export default {

        data() {
            return {
                user           : [],
                files          : [],
                uploadFiles    : [],
            }
        },

        methods : {
            selectFile() {
                const files = this.$refs.files.files;
                this.uploadFiles  = [ ...this.uploadFiles, ...files];
                this.files  = [ 
                    ...this.files, 
                    ..._.map(files, file => ({
                        name: file.name,
                        type: file.type,
                        size: file.size,
                    }))
                ];
            }, 

            submit() {                
                var data = {
                  'customerDetail': {
                    'firstName'     : this.user.firstName,
                    'lastName'      : this.user.lastName,
                    'address' : {
                        'country'    : this.user.profile.country,
                    },
                    'application': {
                       'attachments' : this.uploadFiles,
                    },

                  },
                };

                 const config = {
                    headers: { 'content-type': 'multipart/form-data' }
                };

                axios
                    .post(`/web/bookings`, data, config)
                    .then((e) => {
                        console.log(e);
                    })
                    .catch((e) => {
                        console.log(e);
                    })
            },
        },
    }
</script>

但是当我提交数据时，它会显示错误 Missing boundary in multipart/form-data POST data 如果我删除config数据，那么我的图像不会上传。我不明白问题在哪里。请帮我解决这个问题。提前致谢

标签： javascriptphplaravelformsvue.js