In this tutorial, we are going to learn how to upload single & multiple files and images to the Node server from Vue.js application utilizing Express.js API. Along with that, we will withal learn how to send multipart form data utilizing FormData() web API.
Let’s get commenced.
Set Up Project
Use command to install Vue project:
vue create vue-single-multi-files-upload
Enter inside the project:
cd vue-single-multi-files-upload
Start the app in the browser:
npm run serve
Configure Bootstrap
Open the public/index.html file and add the Bootstrap CDN link.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh">
Install Axios Library
Install Axios library in Vue.js app to make the API requests.
# NPM
npm install axios --save
# Yarn
yarn add axios
Build Express/Node Server
We will be uploading files and images in the remote server so that we will create a backend server using Node. Create file upload API using Express.js and store it in the MongoDB database.
Create a server folder at the root of your Vue.js project.
mkdir server && cd server
Create package.json for node server.
npm init
We need to install the following dependencies.
npm i --save cors express mongoose multer body-parser
We have to install the nodemon package to re-start the node server.
Define MongoDB Database
Create server/db/database.js file and folder, here we will define the mongoDB database.
module.exports = {
db: 'mongodb://localhost:27017/fileupload'
}
Create Schema
Create server/models folder, create a new file and name it User.js.
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
let userSchema = new Schema({
_id: mongoose.Schema.Types.ObjectId,
files: {
type: Array
},
}, {
collection: 'users'
})
module.exports = mongoose.model('User', userSchema)
Create File Upload API
Create a new folder server/public, and we are going to store uploaded files in this folder.
mkdir public
Next, we need to create a server/routes folder; in this folder, we have to create user.routes.js file. Add all the following code inside the routes file.
let express = require('express'),
multer = require('multer'),
mongoose = require('mongoose'),
router = express.Router();
const DIR = './public/';
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, DIR);
},
filename: (req, file, cb) => {
const fileName = file.originalname.toLowerCase().split(' ').join('-');
cb(null, fileName)
}
});
var upload = multer({
storage: storage,
fileFilter: (req, file, cb) => {
if (file.mimetype == "image/png" || file.mimetype == "image/jpg" || file.mimetype == "image/jpeg") {
cb(null, true);
} else {
cb(null, false);
return cb(new Error('Only .png, .jpg and .jpeg format allowed!'));
}
}
});
// User model
let User = require('../models/User');
router.post('/file-upload', upload.array('files', 10), (req, res, next) => {
const reqFiles = []
const url = req.protocol + '://' + req.get('host')
for (var i = 0; i < req.files.length; i++) {
reqFiles.push(url + '/public/' + req.files[i].filename)
}
const user = new User({
_id: new mongoose.Types.ObjectId(),
files: reqFiles
});
user.save().then(result => {
console.log(result);
res.status(201).json({
message: "Done upload!",
userCreated: {
_id: result._id,
files: result.files
}
})
}).catch(err => {
console.log(err),
res.status(500).json({
error: err
});
})
})
router.get("/", (req, res, next) => {
User.find().then(data => {
res.status(200).json({
message: "Data fetched!",
users: data
});
});
});
module.exports = router;
The Multer package provides the upload.array method. This method takes two parameters, the file name and the total number of files to be uploaded to the server.
You can have a look at the full Multer documentation here.
Set up Node Server
Next, we need to create a server/index.js file. In this file, we define all the server related settings.
let express = require('express'),
mongoose = require('mongoose'),
cors = require('cors'),
bodyParser = require('body-parser'),
dbConfig = require('./db/database');
// Routes to Handle Request
const userRoute = require('../server/routes/user.routes')
// MongoDB Setup
mongoose.Promise = global.Promise;
mongoose.connect(dbConfig.db, {
useNewUrlParser: true,
useUnifiedTopology: true
}).then(() => {
console.log('Database sucessfully connected')
},
error => {
console.log('Database could not be connected: ' + error)
}
)
// Setup Express.js
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
}));
app.use(cors());
// Make Images "Uploads" Folder Publicly Available
app.use('/public', express.static('public'));
// API Route
app.use('/api', userRoute)
const port = process.env.PORT || 4000;
const server = app.listen(port, () => {
console.log('Connected to port ' + port)
})
// Error
app.use((req, res, next) => {
// Error goes via `next()` method
setImmediate(() => {
next(new Error('Something went wrong'));
});
});
app.use(function (err, req, res, next) {
console.error(err.message);
if (!err.statusCode) err.statusCode = 500;
res.status(err.statusCode).send(err.message);
});
Run the Express Server
Open the terminal window and run the following command to start the MongoDB database.
mongod --config /usr/local/etc/mongod.conf
brew services start mongodb-community@4.2
mongo
Start the nodemon server:
nodemon index.js
Here are the file upload API we created:
We have created the File Uploading API using Node and Express.js. Now let us test out our newly built API using Postmen.
| Method | API |
|---|---|
| GET | http://localhost:4000/api |
| POST |
http://localhost:4000/api/file-upload |
Create Single & Multiple Files Uploading Component
In this step we will build Single & Multiple Files and Images Uploading component.
First, create a component/fileUpload.vue in Vue app. Then, add the following code inside of it.
<template>
<div>
<div class="container">
<form @submit.prevent="handleSubmit">
<div class="form-group">
<input type="file" @change="uploadFile" multiple>
</div>
<div class="form-group">
<button class="btn btn-success btn-block btn-lg">Upload</button>
</div>
</form>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
files: null
};
},
methods: {
uploadFile (event) {
this.files = event.target.files
},
handleSubmit() {
const formData = new FormData();
for (const i of Object.keys(this.files)) {
formData.append('files', this.files[i])
}
axios.post('http://localhost:4000/api/file-upload', formData, {
}).then((res) => {
console.log(res)
})
}
}
}
</script>
<style scoped lang="scss">
.container {
max-width: 600px;
}
</style>
The axios.post() method takes the file uploading API that we created using Express.js; the second parameter is the form data that we are sending to the server in multi-parts.
The Object.keys() method returns an array of a given object’s enumerable property names, here we are extracting the files from the FileList API by iterating in the same order that a standard loop does.
Summary
So this was it, in this tutorial, we have learned how to upload files to the express server using Axios and FormData() web API. I hope you loved this articles. Don’t forget to share it with others.
You can download the complete code of this tutorial here.
