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
The second script for the
vue-resource which I use to call the
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
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
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.
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