Express.js là một framework web mạnh mẽ và linh hoạt cho Node.js, được sử dụng rộng rãi để xây dựng các ứng dụng web và API. Một trong những tính năng quan trọng mà nhiều ứng dụng web cần là khả năng tải tệp (file upload). Bài viết này sẽ hướng dẫn bạn cách thực hiện file upload trong Express.js một cách chi tiết và hiệu quả, giúp bạn có thể tích hợp tính năng này vào các dự án của mình.
Các bước chuẩn bị trước khi thực hiện file upload
Cài đặt Express.js
Trước tiên, bạn cần cài đặt Express.js. Mở terminal và chạy lệnh sau để tạo một dự án Node.js mới và cài đặt Express.js:
mkdir file-upload-example cd file-upload-example npm init -y npm install express
Cấu trúc dự án
Tạo cấu trúc thư mục và tệp tin cơ bản cho dự án như sau:
file-upload-example/ |-- node_modules/ |-- uploads/ |-- app.js |-- package.json
Cài đặt các gói cần thiết
Để xử lý file upload trong Express.js, chúng ta sẽ sử dụng gói multer
. Cài đặt multer
bằng lệnh sau:
npm install multer
Giới thiệu về Multer
Multer là gì?
Multer là một middleware cho Express.js, giúp xử lý các tệp tin được gửi từ client đến server dưới dạng multipart/form-data. Multer hỗ trợ lưu trữ tệp tin trực tiếp lên đĩa hoặc trong bộ nhớ, cho phép bạn kiểm soát kích thước tệp và định dạng tệp một cách dễ dàng.
Các tính năng chính
- Xử lý tệp tin nhiều phần (multipart): Multer hỗ trợ xử lý các tệp tin được gửi dưới dạng multipart/form-data.
- Giới hạn kích thước tệp: Bạn có thể đặt giới hạn kích thước tệp tin để ngăn chặn tải lên các tệp tin quá lớn.
- Đặt tên tệp: Multer cho phép bạn tùy chỉnh tên tệp khi lưu trữ trên server.
Cấu hình Multer trong Express.js
Khởi tạo Multer
Để sử dụng Multer, bạn cần khởi tạo và cấu hình Multer trong tệp app.js
:
const express = require('express'); const multer = require('multer'); const path = require('path'); const app = express(); // Cấu hình lưu trữ const storage = multer.diskStorage({ destination: './uploads/', filename: function (req, file, cb) { cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname)); } }); // Khởi tạo Multer với cấu hình lưu trữ const upload = multer({ storage: storage, limits: { fileSize: 1000000 }, // 1MB fileFilter: function (req, file, cb) { checkFileType(file, cb); } }); // Kiểm tra loại tệp tin function checkFileType(file, cb) { const filetypes = /jpeg|jpg|png|gif/; const extname = filetypes.test(path.extname(file.originalname).toLowerCase()); const mimetype = filetypes.test(file.mimetype); if (mimetype && extname) { return cb(null, true); } else { cb('Error: Images Only!'); } } // Middleware để xử lý các yêu cầu JSON và URL-encoded app.use(express.json()); app.use(express.urlencoded({ extended: true })); // Khởi động server const PORT = process.env.PORT || 3000; app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
Lưu trữ tệp tin
Cấu hình Multer để lưu trữ tệp tin trên server bằng cách sử dụng diskStorage
. Bạn có thể tùy chỉnh tên tệp tin và thư mục lưu trữ như ví dụ trên.
Giới hạn kích thước tệp
Đặt giới hạn kích thước tệp tin bằng cách sử dụng thuộc tính limits
trong cấu hình Multer. Ví dụ trên đặt giới hạn kích thước tệp tin là 1MB.
Tạo endpoint để upload tệp
Định nghĩa endpoint
Tạo endpoint trong app.js
để nhận yêu cầu tải tệp (POST request):
app.post('/upload', upload.single('myImage'), (req, res) => { try { res.send('File uploaded successfully'); } catch (err) { res.sendStatus(400); } });
Xử lý yêu cầu tải tệp
Sử dụng Multer middleware upload.single('myImage')
để xử lý yêu cầu và lưu trữ tệp tin. myImage
là tên của trường tệp tin trong form HTML.
Phản hồi sau khi tải tệp
Gửi phản hồi lại cho client sau khi tệp tin được tải lên thành công. Ví dụ trên gửi phản hồi “File uploaded successfully”.
Xử lý lỗi trong quá trình upload tệp
Các lỗi phổ biến
Một số lỗi phổ biến khi tải tệp bao gồm tệp tin quá lớn, định dạng tệp không hợp lệ và lỗi mạng.
Middleware xử lý lỗi
Tạo middleware để xử lý và gửi phản hồi về các lỗi này:
app.use((err, req, res, next) => { if (err.code === 'LIMIT_FILE_SIZE') { res.status(413).send('File size is too large'); } else if (err.message === 'Error: Images Only!') { res.status(415).send('Only images are allowed'); } else { res.status(500).send('Internal server error'); } });
Bảo mật trong quá trình upload tệp
Kiểm tra loại tệp
Kiểm tra và chỉ cho phép tải lên các loại tệp hợp lệ bằng cách sử dụng fileFilter
trong cấu hình Multer.
Quét virus
Sử dụng các công cụ quét virus như clamav
để kiểm tra tệp tin trước khi lưu trữ. Bạn có thể tích hợp công cụ này vào quy trình tải tệp của mình.
Giới hạn số lượng tệp
Đặt giới hạn số lượng tệp tin có thể tải lên trong một yêu cầu để bảo vệ server khỏi bị quá tải.
Hiển thị tệp đã tải lên
Danh sách tệp
Tạo endpoint để hiển thị danh sách các tệp đã tải lên:
const fs = require('fs'); app.get('/files', (req, res) => { fs.readdir('./uploads/', (err, files) => { if (err) { res.status(500).send('Internal server error'); } else { res.json(files); } }); });
Tải xuống tệp
Tạo endpoint để người dùng có thể tải xuống các tệp đã tải lên:
app.get('/files/:filename', (req, res) => { const filename = req.params.filename; const filePath = path.join(__dirname, 'uploads', filename); res.download(filePath); });
Xóa tệp
Tạo endpoint để xóa các tệp đã tải lên khỏi server:
app.delete('/files/:filename', (req, res) => { const filename = req.params.filename; const filePath = path.join(__dirname, 'uploads', filename); fs.unlink(filePath, (err) => { if (err) { res.status(500).send('Internal server error'); } else { res.send('File deleted successfully'); } }); });
Các trường hợp sử dụng thực tế
Tải lên ảnh đại diện người dùng
Xử lý upload ảnh đại diện người dùng và lưu trữ trong cơ sở dữ liệu. Sử dụng Multer để xử lý ảnh và MongoDB hoặc một cơ sở dữ liệu khác để lưu trữ đường dẫn ảnh.
Tải lên tệp tài liệu
Xử lý upload và lưu trữ các tệp tài liệu, như PDF, DOCX, đảm bảo rằng các tài liệu được lưu trữ an toàn và có thể truy cập dễ dàng.
Tải lên video
Xử lý upload và lưu trữ các tệp video lớn, áp dụng các biện pháp bảo mật và tối ưu hóa hiệu suất để đảm bảo quá trình tải lên và phát lại video mượt mà.
Kết luận
Việc tích hợp tính năng file upload vào ứng dụng Express.js không chỉ giúp cải thiện trải nghiệm người dùng mà còn mở ra nhiều cơ hội phát triển ứng dụng mạnh mẽ hơn. Bằng cách làm theo các hướng dẫn chi tiết trong bài viết này, bạn có thể dễ dàng triển khai tính năng file upload và đảm bảo nó hoạt động hiệu quả và an toàn.
Tham khảo
Bài viết này hy vọng sẽ cung cấp cho bạn cái nhìn chi tiết và hữu ích về cách thực hiện file upload trong Express.js, giúp bạn có thể áp dụng vào các dự án của mình để tạo ra các ứng dụng web mạnh mẽ và hiệu quả.