Preparation
We will use the Express framework to build a web server and handle file uploads with the help of mult middleware. First, make sure you have installed npm and npm. Then, create a new project directory and initialize a new project under that directory:
mkdir image-upload-service cd image-upload-service npm init -y
Next, install Express and mult:
npm install express multer
Build an Express server
Create a file in the project directory and start writing the Express server code:
const express = require('express');
const app = express();
const port = 3000;
('/', (req, res) => {
('Picture upload service');
});
(port, () => {
(`The server runs on http://localhost:${port}`);
});
At this time, run node and access http://localhost:3000 in the browser, you should see the prompt for "Image Upload Service".
Configure a mult to upload images
multiter is a middleware for handling multipart/form-data type form data, which is very suitable for handling file uploads. Configure the multiter in:
const multer = require('multer');
// Configure the mult storage engine, use local storage hereconst storage = ({
destination: function (req, file, cb) {
cb(null, 'uploads/'); // Upload file storage directory },
filename: function (req, file, cb) {
const uniqueSuffix = () + '-' + (() * 1E9);
cb(null, + '-' + uniqueSuffix + '.' + ('.').pop()); // Generate unique file name }
});
const upload = multer({ storage: storage });
In the above code, we define a local storage engine that stores the uploaded images in the uploads/ directory and generates a unique file name for each uploaded file.
Process image upload request
Next, add a route to handle the image upload request:
('/upload', ('image'), (req, res) => {
if (!) {
return (400).send('No file to upload is selected');
}
('File upload successfully');
});
Here ('image') middleware is used to handle the upload of a single file named image. If no file is selected, a status code of 400 is returned.
Complete code example
Here is the complete code:
const express = require('express');
const app = express();
const port = 3000;
const multer = require('multer');
const storage = ({
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
const uniqueSuffix = () + '-' + (() * 1E9);
cb(null, + '-' + uniqueSuffix + '.' + ('.').pop());
}
});
const upload = multer({ storage: storage });
('/', (req, res) => {
('Picture upload service');
});
('/upload', ('image'), (req, res) => {
if (!) {
return (400).send('No file to upload is selected');
}
('File upload successfully');
});
(port, () => {
(`The server runs on http://localhost:${port}`);
});
Test image upload service
You can use Postman or write a simple HTML form to test this image upload service. For example, create a file:
<!DOCTYPE html>
<html>
<body>
<h2>Upload pictures</h2>
<form action="http://localhost:3000/upload" method="post" enctype="multipart/form-data">
<input type="file" name="image">
<input type="submit" value="Upload">
</form>
</body>
</html>
Open in the browser, select an image and click upload. You should see the prompt "File upload successfully", and the uploaded image file will be generated in the uploads/ directory.
Through the above steps, we successfully built an image upload service in it. You can further expand and optimize this service according to actual needs, such as adding file size limits, image format verification and other functions. I hope this article can help you successfully implement the image upload function in your project.
The above is the detailed content of the detailed tutorial on using the image upload service. For more information about the image upload service, please pay attention to my other related articles!