Today in this tutorial we are going to see how to upload image or files in vue js 2.0. We have a staright forward example on how to upload image with vuejs and send it to your backend and upload it to the server.
I hope you have setup your vuejs application ready. If you have not yet made it ready you can check our setting up vue laravel application tutorial to check how to work vuejs with laravel and make application ready.
It works with standalone vue application too. If you want to implement this on standalone, setup new vue application using npm.
We are going to create new vue image upload component and work it there so that you can fully understand how we are achieving our goal.
Lets get started
Create new component called UploadImage.vue. Lets break down on what we have to do make a image upload feature inside our component.
- Prepare a form with two input of type text named Image Title and another input for type to browse for files.
- We will have two functions, one to grab the selected image and another to submit the form.
- We will grab the image and store it in variable and send it to server via api to the server along with other form inputs (image title)
- Finally we will create a route in our backend (laravel) and write functions in controller to grab the form data inputs and image to store it or save it in database.
I have prepared form and wrote necessary logics and functions to upload the image and store it in variable till step 3 in these code below which we will needing in our vue js components. Take a look below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<template> <div> <h2>Code in House Upload Image with Vue</h2> <form @submit.prevent="SubmitData" id="myForm"> <div class="form-group"> <label for="">Enter Image Title</label> <input type="text" name="image_title" class="form-control" placeholder="Enter Image Title" /> </div> <div class="form-group"> <input type="file" name="image" @change="uploadImage"> </div> <div class="form-group"> <input type="submit" class="btn btn-success btn-xs" name="image"> </div> </form> </div> </template> <script> export default { name: "uploadImage", data () { return { image_file:null } }, methods: { uploadImage(event) { this.image_file = event.target.files[0]; }, SubmitData() { var formData = new FormData(document.getElementById("myForm")); formData.append("image",this.image_file); let instance = this; axios.post('api/upload-image', formData) .then(function (response) { console.log(formData); document.getElementById("myForm").innerHTML="Upload Success"; }) .catch(function (error) { console.log(error); }); } } } </script> <style scoped> </style> |
Make sure you register our newly created image upload component in routes so that it would open when we hit the url in the browser. Lets register it.
Open up routes.js of your vue application. It might be index.js inside the folder routes. Make it sure its the vue routes. I hope you got my point.
|
1 2 3 4 5 6 |
{ path:"/upload-image", name:"uploadImage", component:UploadImage, props:true } |
Now its time to create routes for backend to send our form data to server. We need to create routes inside routes/api.php and function inside the AdminController.php.
|
1 |
Route::post("upload-image",'AdminController@uploadImage'); |
If you dont have controller yet, create one controller named AdminController.php.
Paste this codes below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class AdminController extends Controller { public function UploadImage(Request $request) { $data = $request->all(); // write your code here to upload an image and send it to database. return $data; } } |
Finally hit php artisan serve and npm run watch and test the application.
If you have any problem, you can contact us using the contact form in our website.
Leave a Reply