Question 17592 in Laravel Question posted in
The official Laravel Documentation can be found here.

trying to store image from vue form and send to backend laravel

I’m a newbie and i’m trying to create a rest project with Vue and Laravel and I have a form that allows to send an image, but when I try to store it in the db, I got an error:

"Request failed with status code 422"
and
"The image must be an image"

I can’t figure how to solve it, any suggestion?

<script>
export default {
    data() {
        return {
            title: undefined,
            year: undefined,
            director: undefined,
            plot: undefined,
            rating: undefined,
            image: null,
        };
    },
    methods: {
        insertedFile(e) {
            this.image = e.target.files[0];

        },
        addFilm() {

            const formData = new FormData;
            formData.set('image', this.image)
            console.log(formData.get('image'));
            // 
            axios
                .post("/api/films", {
                    title: this.title,
                    year: this.year,
                    director: this.director,
                    plot: this.plot,
                    rating: this.rating,
                    image:formData
                })
                .then((response) => {
                   console.warn(response)
                });
        },
    },
};
</script>

<template>
    <form @submit.prevent="addFilm()" enctype="multipart/form-data" method="post">
        <input type="text" name="title" placeholder="title" v-model="title" />
        <input type="number" name="year" placeholder="year" v-model="year" />
        <input
            type="text"
            name="director"
            placeholder="director"
            v-model="director"
        />
        <input type="text" name="plot" placeholder="plot" v-model="plot" />

        <input
            type="number"
            name="rating"
            placeholder="rating"
            v-model="rating"
        />
        <input
            type="file"
            name="image"
            id="image"
            @change="insertedFile($event)"
        />
        <button type="submit">Submit</button>
    </form>
</template>

Controller:

public function store(Request $request)
    {

        $request->validate([

            'title' => 'required',
            'year' => 'required',
            'plot' => 'required',
            'director' => 'required',
            'rating' => 'required',
            'image' => 'image|mimes:jpg,png,jpeg,svg|max:2048'

        ]);
    


            $film = new Film([
                'title' => $request->title,
                'year' => $request->year,
                'plot' => $request->plot,
                'director' => $request->director,
                'rating' => $request->rating,
                "image" => $request->file('image')->store('images', 'public')

            ]);
            $film->save();
       

        return redirect()->route('home')
            ->with('success', 'film created successfully!');
    }
Tags:

2

Answers


  1. 0

    Try combining your payload (data) with your formData and setting the content-type header of your axios request to multipart/form-data:

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

let data = new FormData();
data.append('title', this.title);
data.append('year', this.year);
data.append('director', this.director);
data.append('plot', this.plot);
data.append('rating', this.rating);
data.append('image', this.image);

axios.post('api/films', data, config)
.then((response) => {
    console.warn(response)
 })
 .catch((error) => {
    console.log(error);
 });
    Login or Signup to reply.
  2. 0

    you’re passing the FormData object as image.
    in order to make it work, you should give axios the FormData object containing all the data you want to send.

    addFilm method should look like this:

                const formData = new FormData;

            formData.append('image', this.image)
            formData.append('title', this.title)
            formData.append('year', this.year)
            formData.append('director', this.director)
            formData.append('plot', this.plot)
            formData.append('rating', this.rating)
            formData.append('image', this.image)

            axios
                .post("/api/films", formData)
                .then((response) => {
                   console.warn(response)
                });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search