Laravel Vue JS Image Upload Example with Demo

Laravel Vue JS Image Upload Example with Demo

In this post we will give you information about Laravel Vue JS Image Upload Example with Demo. Hear we will give you detail about Laravel Vue JS Image Upload Example with DemoAnd how to use it also give you demo for it if it is necessary.

Hi Guys,

In this tutorial, I would like to share with you how to image upload using vue js laravel 5.6. We will image upload step by step from scratch so, don’t worry if you are new with laravel or vue. we will use axios for post request and also pass csrf token with file upload in laravel 5.6.

If you are a developer, then you know about in today’s web application. Image or File upload is a primary task for every web app. The client always wants to image or file upload in his web application like a profile picture, product image etc. But if you are working with vue.js then you think how it can be possible. But no issue, We will do it from scratch like install laravel, npm, vue, axios etc.

In this example, we will create a post route with a controller. In the controller method, we will write code of image upload. Then we will install npm, vue and axios. After that, we will write a code of the component. In a component file, we will write code of image upload using vue js. After finish all the step, you will get a layout like as below screenshot and you can also download code and check the demo.

Preview:

Step 1 : Install Laravel 5.6 Project

first of all, we will install Laravel 5.6 application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Create Route

In second step, we will create one post route and write image upload code. So, let’s add new route on that file.

routes/web.php

Route::post('formSubmit','ImageController@formSubmit');

Also see:Dynamic Form Validation in VueJs with PHP Laravel 5.6

Step 3: Create ImageController

in this step, now we have create ImageController with formSubmit methods, in this method we will write code of store image on server. So let’s create controller:

app/Http/Controllers/ImageController.php

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

class ImageController extends Controller

{

/**

* success response method.

*

* @return IlluminateHttpResponse

*/

public function formSubmit(Request $request)

{

$imageName = time().'.'.$request->image->getClientOriginalExtension();

$request->image->move(public_path('images'), $imageName);

return response()->json(['success'=>'You have successfully upload image.']);

}

}


Step 4: NPM Configuration

Here, we have to first add setup of vue js and then install npm, so let’s run bellow command in your project.

Install vue:

php artisan preset vue

Install npm:

npm install

Step 5: Write on app.js and Components

In this step, we will write code on app.js and then we will create vue js components, So let’s create both file and put bellow code:

resources/assets/js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({

el: '#app'

});

resources/assets/js/components/ExampleComponent.vue

<template>

<div >

<div >

<div >

<div >

<div >Laravel Vue JS Image Upload - ItSolutionStuff.com</div>

<div >

<div v-if="success != ''" role="alert">

{{success}}

</div>

<form @submit="formSubmit" enctype="multipart/form-data">

<strong>Name:</strong>

<input type="text" v-model="name">

<strong>Image:</strong>

<input type="file" v-on:change="onImageChange">

<button >Submit</button>

</form>

</div>

</div>

</div>

</div>

</div>

</template>

<script>

export default {

mounted() {

console.log('Component mounted.')

},

data() {

return {

name: '',

image: '',

success: ''

};

},

methods: {

onImageChange(e){

console.log(e.target.files[0]);

this.image = e.target.files[0];

},

formSubmit(e) {

e.preventDefault();

let currentObj = this;

const config = {

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

}

let formData = new FormData();

formData.append('image', this.image);

axios.post('/formSubmit', formData, config)

.then(function (response) {

currentObj.success = response.data.success;

})

.catch(function (error) {

currentObj.output = error;

});

}

}

}

</script>

Step 6: Update welcome.blade.php

At last step, we will update our welcome.blade.php file. in this file we will use app.js file and use it, so let’s update.

resources/views/welcome.blade.php

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="csrf-token" content="{{ csrf_token() }}">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Laravel 5.6 Vue JS Image Upload - ItSolutionStuff.com</title>

<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">

</head>

<body>

<div id="app">

<example-component></example-component>

</div>

<script src="{{asset('js/app.js')}}" ></script>

</body>

</html>

Now you have to run below command for update app.js file:

Also see:Laravel Vue JS Axios Post Request Example and Demo

npm run dev

Now you can check our example and also check demo and download free code.

I hope it can help you…

Hope this code and post will helped you for implement Laravel Vue JS Image Upload Example with Demo. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  24  =  28

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US