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