How to use vue resource to upload file

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

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

  
  
   
     
  


  


  	
  	Upload
       
  

In this code you can see the

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

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