File Upload Using Vuejs with Laravel Step By Step
Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to File Upload Using Vuejs with Laravel Step By Step
In this post we will show you Best way to implement Image upload and validation using Laravel and VueJs, hear for How to Multiple file uploads with Vue.js and Laravel with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
Step 1 : Simple Create HTML Layout
[php]
VueJs Image upload and move in Laravel 5.4
[/php]
Step 2 : Write Route
[php]
Route::post(‘liveSaveImg’, function(Request $request) {
} );
[/php]
Step 3: Write VueJs simple call Ajax code to easy upload the file
// liveFormsubmit() will trigger and click to when user press simple “save” button click
// this.$refs.myfileinput => Which will refer ref tag inside the vue element. In our case
// simple used Laravel 5.4 version to using “axios” new vuejs to perform Http request and response operations. In previous simple vuejs versions we need to use ” simple script like as a this.http.post “
[php]
VueJs Image upload and move in Laravel 5.4
[/php]
[php]
const app = new Vue({
el: ‘#liveapp’,
methods : {
liveFormsubmit() {
var liveFormData = new FormData();
liveFormData.append(‘id’, ‘1’);
liveFormData.append(‘image’, this.$refs.myfileinput.files[0]);
console.log(liveFormData)
axios.post(‘http://infinityknow.com/liveSaveImg’, liveFormData).then( response => {
console.log(response);
} ).catch((error) => {
console.error(error);
});
}
}
});
[/php]
Step 4 : Write laravel some code to move the file or img inside defined Route
Here will be show have added simple very basic code. and You can create it how ever any you want.
[php]
Route::post(‘liveSaveImg’, function(Request $request) {
//route this file
$file_name = Request::file(‘image’)->getClientOriginalName();
// request this file to route
Request::file(‘image’)->move(public_path(‘images’), $file_name);
// and return the response
return 1;
} );
[/php]
vue.js – Laravel- VueJS image upload
Now you can see the uploaded file inside public/images folder.
[php]
$request->file(‘image’)->store(‘images’);
[/php]
I hope you have Got Multiple file uploads with Vue.js and Laravel 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.