Published on June 08, 2020

Upload Image with Vue JS & Laravel Image Intervention

I'll assumed you have been setup with your project so I won't tell your about the structur folder.

Now let's imagine you already have the vue component to upload an image.

<template>
    <div id="app">
        <form action="#" method="post" @submit.prevent="store" enctype="multipart/form-data">
            <p>
                <input type="file" @change="imageHandler"/>
            </p>
            <p>
                <input type="text" v-model="form.name" placeholder="Name" />
            </p>
            <button type="submit">Upload</button>
        </form>
    </div>
</template>

<script>
export default {
    
};
</script>

The very first thing we need to do is make the state.

data() {
    return {
        form: {
            name: '',
            thumbnail: '',
        },
    }
},

Then, if you see the form above, we have two methods, first is store for submitting the form, the second is imageHandler for handling image.

Now, let's focus on event imageHandler first.

methods: {
    imageHandler(e) {
        this.createImage(e.target.files[0])
    },

    createImage(fileObject) {
        const reader = new FileReader();
        reader.onload = (e) => {
            this.form.thumbnail = e.target.result
        }
        reader.readAsDataURL(fileObject)
    },

    ...
}

If you don't understand what the scripts does, it just make your image to base64.

Moving on, we'll continue with store method that we've just created.

async store() {
    await axios.post('http://localhost:8000/api/upload', this.form)
}

In this example, I'm using the axios, so I will import the axios right before export default like so

import axios from "axios";
export default { ... }

Now, let's move on the backend. I will assume you understand the basic laravel setup, like router & controller.

First, let's open up the api.php in routes folder, and make new route to the controller like so

use Illuminate\Support\Facades\Route;
Route::post('upload', 'UploadController@store');

Make the controller, or if you have one, just playaround with the methods. But before we continue, if you haven't yet installed the php image intervention, so do it now.

composer require intervention/image

If you need the config, just publish the vendor like this

php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravelRecent"

Now, let's focus on the controller, in your method store, it's up to you what you want to call it, in this case my methods just store.

public function store()
{
    // Convert from base64 to an image
    $thumbnail = Image::make(request('thumbnail'))->fit(500, 200)->encode('jpg');
    // Determine your path image
    $path = "posts/" . strtolower(\Str::random(37)) . ".jpg";

    // Save the image to your storage
    Storage::put($path, $thumbnail);

    // Save your data to the database
    Post::create([
        'name' => request('name'),
        'thumbnail' => $path,
    ]);

    return 'ok';
}

Don't forget to set your filesystem configuration, in this case, I'm using public disk, so I'll put new line of code in .env file like so

FILESYSTEM_DRIVER=public

Then, make the symlink to public folder.

php artisan storage:link

Done.

Login to make a comments. Don't worry, it's free.
© 2020 Irsyad Notes