PHP Vue.js

VueJs Image upload and move in Laravel 5.4

VueJs Image upload and move  in Laravel 5.4

VueJs Image upload and move  in Laravel 5.4, Sometimes we need to upload user avatar without loading the form. In this case normally we will use ajax, We have built in VueJs in laravel.
Lets see how to upload and move the file using Laravel and VueJs

Step 1 : Create HTML Layout



Step 2 : Write Route

Step 3: Write VueJs Ajax code to upload the file

// submitform() will trigger when user press “save” button
// this.$refs.fileInput => Which will refer ref tag inside the vue element. In our case <input type=”file” id=”fileInput” ref = “fileInput” />
// Laravel 5.4 using “axios” to perform Http operations. In previous versions you need to use ” this.http.post

Step 4 : Write laravel code to move the file inside defined Route

// Here have added very basic code. You can make it how ever you want.

Now you can see the uploaded file inside public/images folder.

Thats it, Hope it will help someone.