Vue Laravel Image Upload

Hello to all, welcome to therichpost.com. In this post, I will do, Vue Laravel Image Upload.

I have shared the multiple image upload in laravel and now I will upload the image into laravel folder with the help of vuejs and I have done this easily.

Here I am sharing some working images:

Now come to the coding point and here are steps need to follow:

1. Here are some basics commands need to run into terminal to install laravel setup and node modules for vuejs:

$ composer create-project –prefer-dist laravel/laravel vuelaraveluploadimage

$ cd vuelaraveluploadimage

$ npm install

$ composer create-project --prefer-dist laravel/laravel vuelaraveluploadimage
$ cd vuelaraveluploadimage
$ npm install

2. Now, here is the below code, you need to add into your resources\js\components\ExampleComponent.vue file:

I have used axios post method to upload file and this behaves like ajax:

<template>
    <div class="container">
        <h2>Vue Laravel Image Upload</h2>
        <form @submit="checkForm" ref="myForm">
        <div class="form-group">
            <label for="email">Upload Profile Pic:</label>
            <input type="file" name="profile_pic" id="profile_pic">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
</template>

<script>
    export default {
        methods:{
            checkForm: function (e) {
                var myFormData = new FormData(this.$refs.myForm)
                axios({
                    method: 'post',
                    url: '/vueuploadimage',
                    data: myFormData,
                    config: { headers: {'Content-Type': 'multipart/form-data' }},
                }).then(function (response) {
                  alert(response.data.message);
                });
                e.preventDefault();
            }
        },
    }
</script>

3. Now, here is the below code, you need to add into resources\js\app.js file:

require('./bootstrap');
window.Vue = require('vue');
import "bootstrap/dist/css/bootstrap.css";
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
    el: '#app'
});

4. Now here is the code, you need to add into your resources\views\welcome.blade.php file:

<div id="app"><example-component></example-component></div>     
<script src="{{asset('js/app.js')}}"></script>

5. Now here is the code, you need to add into your routes/web.php file:

Route::post("/vueuploadimage" , "Controller@uploadimage");

6. Now here is the code, you need to add into your app\Http\Controllers\Controller.php file:

In this file, I have wrote the file upload code in folder and also please img folder into public folder:

...
use Illuminate\Http\Request;
public function uploadimage(Request $request)
    {
    	if ($request->hasFile('profile_pic'))
    	{
            $file      = $request->file('profile_pic');
            $filename  = $file->getClientOriginalName();
            $extension = $file->getClientOriginalExtension();
            $picture   = date('His').'-'.$filename;
            $file->move(public_path('img'), $picture);
            return response()->json(["message" => "Image Uploaded Succesfully"]);
    	} 
      else
      {
          	return response()->json(["message" => "Select image first."]);
      }
    }
...

7. After all above set up, run php artisan serve command into your terminal and check the Vue laravel Image Upload working and if you have any query related to this post then do comment below or ask questions.

Thank you,

Ludhiane wala ajay,

TheRichPost