In this article we will study how we can use vue-resource library to upload file to the back-end server.
I am using following HTML template to start. I have used following scripts in header section of the HTML
|
1 2 3 4 |
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.0/vue-resource.js"> </script> <link href=" https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css " rel="stylesheet"> |
First one is for the Vue
The second script for the vue-resource which I use to call the this.$http.post method
Third one is the Bulma CSS library
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.0/vue-resource.js"> </script> <link href=" https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css " rel="stylesheet"> <title>Vue.js File Upload with Vue-Resource</title> </head> <body> <div id='root'> <input type="file" @change="fileSelected" > <a class="button is-primary is-small" @click="uplaodFile">Upload</a> </div> </body> <script> </script> </html> |
In this code you can see the
|
1 |
<input type="file" @change="fileSelected" > |
which is file field and it has callback function named fileSelected called on changing selected file by the user
Following code shows the Vue instance and it has got two methods uplaodFile and fileSelected
|
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 |
<script> new Vue({ el: "#root", data: { file :'' }, methods :{ uplaodFile: function(){ let formData = new FormData(); formData.append('upload_file',this.file) formData.append('id',123) this.$http.post( 'http://localhost:8000/api/product/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } } ).then(response=>{ }) .catch(response=>{ console.log(response); }); }, fileSelected:function($event){ this.file =$event.target.files[0] } } }) </script> |
What fileSelected method do is, assigning the file to the file data variable when you browse the file and select it
When you click the button @click="uplaodFile" will call the method uplaodFile .
We have FormData instance and we append the upload_file with the file instance.
Next you can call the $http.post method and pass the formData and headers objects as the parameters.
So calling post method with these parameters will upload the selected file to your server. You can get the response which is based on uploading success or failure