Hướng dẫn tạo form upload nhiều hình ảnh bằng Node.js

Hướng dẫn chi tiết cách tạo form upload nhiều hình ảnh trong Node.js bằng cách sử dụng thư viện `Multer` để xử lý tệp tải lên và `Express` để tạo server.

Trong bài viết này, chúng ta sẽ học cách sử dụng Multer cùng với Express trong Node.js để tạo một form cho phép người dùng upload nhiều hình ảnh cùng lúc.

Mã Node.js:

1. Cài đặt các thư viện cần thiết

npm init -y
npm install express multer

2. Tạo file index.js với nội dung sau:

const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();

// Cấu hình Multer
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/');
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
});

const upload = multer({ storage: storage });

// Tạo đường dẫn tĩnh cho thư mục chứa file upload
app.use('/uploads', express.static('uploads'));

// Tạo form upload
app.get('/', (req, res) => {
    res.send(`
        <form action="/upload" method="POST" enctype="multipart/form-data">
            <input type="file" name="images" multiple>
            <button type="submit">Upload</button>
        </form>
    `);
});

// Route để xử lý upload nhiều hình ảnh
app.post('/upload', upload.array('images', 10), (req, res) => {
    res.send('Upload thành công! ' + req.files.length + ' hình ảnh đã được tải lên.');
});

// Khởi động server
app.listen(3000, () => {
    console.log('Server đang chạy tại http://localhost:3000');
});

Giải thích chi tiết từng dòng code:

1. const express = require('express');: Nhập thư viện Express để tạo web server.
2. const multer = require('multer');: Nhập thư viện Multer để xử lý upload file.
3. multer.diskStorage: Định nghĩa nơi lưu trữ và tên file khi tải lên.
4. app.use('/uploads', express.static('uploads')): Tạo đường dẫn tĩnh để truy cập các file đã upload.
5. upload.array('images', 10): Cho phép upload tối đa 10 hình ảnh cùng lúc.
6. app.get('/'): Route để hiển thị form upload.
7. app.post('/upload'): Route để xử lý việc upload hình ảnh.

Yêu cầu hệ thống:

• Node.js phiên bản 14 trở lên
• Thư viện express và multer

Cách cài đặt các thư viện để chạy được đoạn mã Node.js trên:

Sử dụng lệnh sau:

npm install express multer

Lời khuyên:

• Kiểm tra kích thước và loại file trước khi upload để đảm bảo tính an toàn.
• Nên giới hạn số lượng và kích thước hình ảnh để tránh quá tải server.

---