How to use vue resource to upload file

Last Updated: June 5, 2018

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.$ method
Third one is the Bulma CSS library

  Vue.js File Upload with Vue-Resource


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 $ 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