0

I have a problem in my image upload in Laravel Vue. I do not upload image in my project.Here is My Code

<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>

But When I submit Data it shows error Missing boundary in multipart/form-data POST data If I remove config data then my image is not uploaded. I don't get where the problen is. Please help me to solve this problem. Thanks in advance

7
  • I don't see where you add your image to the data you're posting to your API? It doesn't seem to be part of data? Commented Jan 16, 2020 at 11:52
  • @DelenaMalan Sorry For my mistake. I have updated my code, Please take a look Commented Jan 16, 2020 at 11:59
  • Maybe have a look at stackoverflow.com/a/50472925/3486675 Commented Jan 16, 2020 at 12:18
  • I believe you should be using FormData object instead of passing a regular object with a multipart/form-data header. Commented Jan 16, 2020 at 12:25
  • @Flame How can I use FormData? Will you give me an example based on my code Commented Jan 16, 2020 at 12:33

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.