Изображение не загружается в Vue Js Laravel - PullRequest
Новая
       14

Изображение не загружается в Vue Js Laravel

0 голосов
/ 16 января 2020

У меня проблема с загрузкой моего изображения в 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, то мое изображение не загружается. Я не понимаю, где проблема. Пожалуйста, помогите мне решить эту проблему. Заранее спасибо

...