Vue js upload file-Image upload and move using Laravel

Vue js upload file-Image upload and move using Laravel

In this Post We Will Explain About is Vue js upload file-Image upload and move using Laravel With Example and Demo.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to VueJs Image upload and move in Laravel 5.4

In this post we will show you Best way to implement Laravel Upload Image Tutorial using Vue js AJAX, hear for How to File Upload Using Vuejs with Laravel server script with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Phase 1 : Create HTML Code

<div class="panel-body" id="liveapp">
    <input type="file" id="myfilename" ref = "myfilename" />
    <input type="button" name="button" value="save" @click="uploadsaveForm()">
</div>

Phase 2 : Write Route

Route::post('ImagesSavedata', function(Request $request) {
} );

Phase 3: Write VueJs Ajax code to upload the file

uploadsaveForm() will trigger and so when user press simple “save” button
// this.$refs.myfilename => Which shell refer ref tag all the data pass inside the vue param. In our case,VueJs Image upload and move in Laravel 5.4

 

<input type="file" id="myfilename" ref = "myfilename" />

Laravel 5.4 or more version using “axios” to perform Http request and response operations. In previous simple versions we need to use ” like as a this.http.post “

const liveapp = new Vue({
    el: '#liveapp',
    methods : {
    	uploadsaveForm() {
    		var all_formdata_get = new FormData();
    		all_formdata_get.liveappend('id', '1');
    		all_formdata_get.liveappend('image', this.$refs.myfilename.files[0]);
    		console.log(all_formdata_get)
    		axios.post('https://infinityknow.com/ImagesSavedata', all_formdata_get).then( response => {
			//generate success log
                            console.log(response);
	    	} ).catch((error) => {
				//generate error log
	                 console.error(error);
	            });
    	}
    }
});

Phase 4 : Write laravel simple routing code to move the your file inside defined Route

Route::post('ImagesSavedata', function(Request $request) {
	$name =  Request::file('image')->getClientOriginalName();
	Request::file('image')->move(public_path('images'), $name);
	return 1;
} );

Now we can show the uploaded your file successfully inside this folder Like as a ” public/images folder.

Example

I hope you have Got Ajax Image Upload using Laravel and Vuejs And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.