Rate this post

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ả.

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now