File and image uploads are a must-have feature for many non-trivial apps. Lucky for us, it’s easy to setup in Vue apps with vue-picture-input. Check this post of ours if you’re looking to create your own custom file selector input.
Install vue-picture-input via npm or Yarn:. The vue-picture-input library allows for a variety of usages, and is very simple to use:. Here are a few props that we’re going to make use of:. ref: We’ll need this to access the base64 image string. width, height: Dictate the width and height of the component.
accept: Used to restrict accepted file types.
removable: Specifies whether the component can be reset or not.
Setup the backend project
Additionally, the component emits the following events:.
- removed: emitted when picture is detached from component.
- changed: emitted when the selected picture is changed (ie.
- Here’s what our code looks like for the file input:.
Let’s add a button that will allow us to upload the selected image to our backend.
|POST||/upload||upload a File|
|GET||/files||get List of Files (name & url)|
|GET||/files/[filename]||download a File|
It basically calls the attemptUpload method when clicked and has the disabled class binding. It’ll only be enabled if there’s a selected image:. Next, we’ll use Axios to make network requests. We’ll also leverage the Formdata API to create a sweet composition for posting image data:. The above code accepts a url as the first parameter and a file object as the second parameter then returns a promise.
It also sets the header’s content-type to multipart/formdata so our backend API can tell what’s in the pipes.
Testing file upload component
- We can therefore use the above code as so:.
- Here’s what our onChanged, onRemoved and attemptUpload methods look like:.
- Our image upload is working on the frontend.
Creating Express Backend server
Read-on for how to set this up on a Node.js backend using Express. Modified4 years, 7 months ago. I'm using the upload component of Element UI.
It unfortunately triggers a POST request as soon as a file is uploaded.
What I'm aiming for is to push the files to an empty array which would be posted after with button.
11 gold badge1111 silver badges2020 bronze badges. 2020 bronze badges.
Apparently, you also need to set the auto-upload prop to be false. Otherwise, it defaults to true and will automatically try to upload the file even if you've specified a function for the http-request prop.
2121 gold badges149149 silver badges145145 bronze badges. 145145 bronze badges. File upload component for Vue.js. Using Vue 2 with Axios, you can upload files easily with a few clicks.Using the tag and specifying the type to file, the browser willallow you to select the file to upload from your computer.
More Vue Tutorials
Below is an example. Vue School has some of our favorite Vue video courses.
Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase.
Creating a Vue Project
In this tutorial, we are going to learn about how to upload the files in vue.js using express as a backend API.
- We are creating a post API using NodeJS & express, which helps us to upload the files like (images, pdf, etc) to the backend server.
- Let’s set up the node.js backend project by running the following commands one by one in your terminal.
Now, we need to install four packages which are express, express-fileupload,cors and nodemon.
Run the below command to install the packages. Now open the fileupload folder in your favorite code editor and create a new file called server.js.
Add the following code to the server.js file. In the above code, we first imported three packages which are express, express-fileupload and cors, next we created express application by invoking express() function.
Our post API route is /upload. We are placing files inside the public folder, so that we need to create a public folder inside our backend project. To run and restarting the backend server we are using the nodemon, open your package.json file and add the following code to scripts object.
Now, start the backend server by running npm start server command in your terminal.which shows a similar text. Let’s create a new vue project by using the Vue Cli.
This above command will create a new vue project inside the vue-file-upload folder.
Now, change your current working directory to vue-file-upload by running the following command.
We are installing the axios http client library in vue project, which helps us to make the post request toour backend API.
Now, open the vue-file-upload folder in your favorite code editor and create a new file called FileUpload.js inside the components folder.
Add the following code to the FileUpload.js file. In the above code, we have added two elements inside the template which are input and button.where attribute type=file is added to the input element so that it can accept the files.
Inside the methods object we have defined two methods which are onFileChange() and onUploadFile().
The onFileChange() method is invoked once a user is selected the file, inside that method we are accessing the file data using e.target.files and setting it to this.selectedFile data property.
The onUploadFile() is invoked once a user clicks the Upload File button, inside that method, we are creating a new FormData object by invoking the FormData constructor and appending the file to formdata using append() method. Then we are uploading a file to the backend api using the axios.post() method by passing API endpoint and formData as arguments.
Add the below styles to the FileUpload.vue file. Now, import the FileUpload component inside the App.vue file.
Start the Vue app development server by running the following command in your terminal.
Let’s test the FileUpload component by uploading a sample image or file. Note: Make sure that your backend server is running.
Have you seen in the above image, our file is successfully uploaded to the backend server.
- Let’s add the progress bar to our FileUpload component so that the user knows how much amount of file is uploaded.
- The axios.post() method also accepts a third argument, which is an object that contains an onUploadProgress() method by using that we can add a progress bar to the FileUpload component.
- update the FileUpload.vue file with the below code.
- You can also improve it more like hiding the upload button during the file is uploading or getting the file url once a file is uploaded to the server, etc.
- Labels to progress bar is the text within it
Open App.vue and embed the
UploadFiles Component with
Because most of HTTP Server use CORS configuration that accepts resource sharing restricted to some sites or ports. And if you use the Project in this post for making Server, you need to configure port for our App.
src folder, create vue.config.js file with following content:
We’ve set our app running at port
8081. vue.config.js will be automatically loaded by
Installing Axios Library
Run this Vue File Upload App with command:
npm run serve.
Open Browser with url
http://localhost:8081/ and check the result.
Fullstack CRUD App:
Creating file upload component
Today we’re learned how to build an example for upload Files using Vue and Axios. We also provide the ability to show list of files, upload progress with Bootstrap, and to download file from the server.
You can find how to implement the Rest APIs Server at one of following posts:
– Node.js Express File Upload Rest API example
– Node.js Express File Upload to MongoDB example
– Node.js Express File Upload to Google Cloud Storage example
– Spring Boot Multipart File upload (to static folder) example
Or: Spring Boot Multipart File upload (to database) example
If you want to upload multiple files like this:
Vue Multiple Files Upload with Axios, FormData and Progress Bars
Or use Vuetify for File Upload with the tutorial:
Vuetify File Upload example
Or Image upload:
Vue upload image using Axios (with Preview)
The source code for this Vue Client is uploaded to Github.