Image upload with vueJS and Laravel

Question

I want to add a input file for a vueJS component including a form. Here is my component :

        <form @submit.prevent="sendForm" enctype="multipart/form-data">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="title">Nom de l'évènement</label>
                    <input id="title" name="title" type="text" class="form-control" v-bind:class="{ 'is-invalid': errors.title }" v-model="fields.title">
                    <div v-if="errors && errors.title" class="text-danger py-2">{{ errors.title[0] }}</div>
                </div>
            </div>

            <div class="col-md-6">
                <label for="image">Image ou flyer de l'évènement</label>
                <div class="custom-file">
                    <input type="file" class="custom-file-input" id="image" name="image" @change="imageChange" accept=".png, .jpg, .jpeg" v-bind:class="{ 'is-invalid': errors.image }">
                    <label class="custom-file-label" for="image">{{ imageLabel }}</label>
                    <div v-if="errors && errors.image" class="text-danger py-2">{{ errors.image[0] }}</div>
                </div>
            </div>
    </form>

<script>

import {LMap, LTileLayer} from 'vue2-leaflet';

export default {
    components: {
        LMap,
        LTileLayer,
    },
    data () {
        return {
            // Some data are not usefull for this question
            url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            zoom: 5,
            center: [47, 2.5],
            bounds: null,
            markerLatLng: null,
            city: null,
            error: null,
            errors: {},
            fields: {},
            mapLoading: false,
            typingTimer: 1000,
            imageLabel: 'Sélectionner un fichier'
        };
    },
    methods: {
        sendForm() {
            axios.post('/events', this.fields)
                .then(response => {
                    this.field = {}
                    console.log(response)
                })
                .catch(err => {
                    if (err.response.status === 422) {
                        this.errors = err.response.data.errors || { }
                    }
                });
        },
        imageChange(event) {
            this.imageLabel = event.target.files[0].name,
            this.fields.image = event.target.files[0];
        }
    }
}

Here is my controller :

    public function store(Request $request)
{
    // var_dump($request->image());

    $this->validate($request, [
        'title' => 'required|string|unique:events',
        'description' => 'required',
        'start_date' => 'required|date',
        'end_date' => 'date',
        'latitude' => 'required|numeric',
        'longitude' => 'required|numeric',
        'image' => 'required|image'
    ]);


    // $imageName = Str::slug($request->get('title'), '-') . '.' .$request->image->getClientOriginalExtension();
    // $request->image->move(public_path('images/events'), $imageName);

    return response()->json(null, 200);
}

When i fill and submit my form i got the following message : The image field is required.

It's just like the image is didn't send, someone have an idea please ? I tryied to follow this tutorial for the image upload : https://www.itsolutionstuff.com/post/laravel-vue-js-image-upload-example-with-demoexample.html.

Thank's a lot for everyone who read this entierely and will try to help me.

Florent

Answer 1

I faced the same issue before, the solution is You must use Base64 javascript library it convert the image to string and then you convert it back to image from the Controller,just follow those videos it will save you alot of time i wasted how to use base64 with vuejs

submit base64 string to server