Node.js - Tải lên Tệp: Hướng dẫn cho Người mới Bắt đầu

Xin chào, ngôi sao lập trình tương lai! Chào mừng bạn đến với hành trình thú vị vào thế giới tải lên tệp với Node.js. Là giáo viên máy tính ở khu phố gần bạn, tôi rất vui mừng được hướng dẫn bạn trong chuyến phiêu lưu này. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - chúng ta sẽ bắt đầu từ đầu và dần dần xây dựng kỹ năng. Cuối cùng của bài hướng dẫn này, bạn sẽ tải lên tệp như một chuyên gia!

Giới thiệu về Tải lên Tệp trong Node.js

Trước khi chúng ta đi vào chi tiết, hãy nói về tầm quan trọng của việc tải lên tệp. Hãy tưởng tượng bạn đang tạo một ứng dụng mạng xã hội nơi người dùng có thể chia sẻ ảnh. Hoặc có thể bạn đang xây dựng một hệ thống quản lý tài liệu cho một công ty. Trong cả hai trường hợp, bạn cần một cách để người dùng gửi tệp đến máy chủ của bạn. Đó là khi việc tải lên tệp phát huy tác dụng!

Node.js, môi trường chạy JavaScript đáng tin cậy của chúng ta, cung cấp nhiều cách để xử lý tải lên tệp. Hôm nay, chúng ta sẽ tập trung vào hai thư viện phổ biến: Formidable và Multer. Hãy tưởng tượng chúng như những siêu anh hùng tải lên tệp, mỗi người có những siêu năng lực riêng!

Formidable: Đồng hành Đầu tiên trong Tải lên Tệp

Formidable là gì?

Formidable giống như người bạn tin cậy luôn ở bên để giúp bạn di chuyển. Đây là một module Node.js giúp phân tích dữ liệu form, đặc biệt là tải lên tệp, một cách dễ dàng. Hãy xem cách sử dụng nó!

Cài đặt Formidable

Trước hết, chúng ta cần cài đặt Formidable. Mở terminal và gõ:

npm install formidable

Lệnh này giống như đi đến cửa hàng siêu anh hùng và chọn trang phục Formidable. Bây giờ bạn đã sẵn sàng để bắt đầu tải lên!

Tải lên Tệp Cơ bản với Formidable

Hãy tạo một máy chủ đơn giản có thể xử lý tải lên tệp. Dưới đây là mã:

const http = require('http');
const formidable = require('formidable');
const fs = require('fs');

http.createServer((req, res) => {
if (req.url == '/fileupload') {
const form = new formidable.IncomingForm();
form.parse(req, (err, fields, files) => {
const oldPath = files.filetoupload.filepath;
const newPath = 'C:/Users/YourName/uploads/' + files.filetoupload.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
res.write('Tệp đã được tải lên và di chuyển!');
res.end();
});
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
res.write('<input type="file" name="filetoupload"><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);

Giải thích:

1. Chúng ta tạo một máy chủ sử dụng http.createServer().
2. Nếu URL là '/fileupload', chúng ta sử dụng Formidable để phân tích form đến.
3. Chúng ta di chuyển tệp tải lên từ vị trí tạm thời đến vị trí vĩnh viễn.
4. Nếu URL là bất kỳ thứ gì khác, chúng ta hiển thị một form tải lên đơn giản.

Xử lý Tải lên Nhiều Tệp

Nếu bạn muốn tải lên nhiều tệp cùng một lúc? Không có vấn đề! Dưới đây là cách bạn có thể thay đổi mã:

const http = require('http');
const formidable = require('formidable');
const fs = require('fs');

http.createServer((req, res) => {
if (req.url == '/fileupload') {
const form = new formidable.IncomingForm();
form.multiples = true;
form.parse(req, (err, fields, files) => {
if (Array.isArray(files.filetoupload)) {
files.filetoupload.forEach((file) => {
const oldPath = file.filepath;
const newPath = 'C:/Users/YourName/uploads/' + file.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
});
});
} else {
const oldPath = files.filetoupload.filepath;
const newPath = 'C:/Users/YourName/uploads/' + files.filetoupload.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
});
}
res.write('Tệp đã được tải lên và di chuyển!');
res.end();
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
res.write('<input type="file" name="filetoupload" multiple><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);

Những thay đổi chính là:

1. Chúng ta đặt form.multiples = true để cho phép tải lên nhiều tệp.
2. Chúng ta kiểm tra nếu files.filetoupload là một mảng (nhiều tệp) hoặc một đối tượng (một tệp).
3. Chúng ta sử dụng forEach để xử lý nhiều tệp nếu cần.

Multer: Cậu Bé Mới trong Làng

Giới thiệu về Multer

Bây giờ, hãy gặp siêu anh hùng tải lên tệp tiếp theo: Multer. Multer giống như người em trai cool hơn, trẻ hơn của Formidable. Nó được thiết kế đặc biệt để xử lý multipart/form-data, rất phù hợp cho việc tải lên tệp.

Cài đặt Multer

Để bắt đầu với Multer, cài đặt nó bằng npm:

npm install multer

Tải lên Tệp Cơ bản với Multer

Dưới đây là một ví dụ đơn giản về cách sử dụng Multer:

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

const app = express();

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 });

app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});

app.post('/upload', upload.single('filetoupload'), (req, res, next) => {
const file = req.file;
if (!file) {
const error = new Error('Vui lòng tải lên một tệp');
error.httpStatusCode = 400;
return next(error);
}
res.send(file);
});

app.listen(3000, () => console.log('Máy chủ đã bắt đầu trên cổng 3000'));

Giải thích:

1. Chúng ta thiết lập một bộ nhớ trữ cho Multer để biết nơi lưu tệp và cách đặt tên cho chúng.
2. Chúng ta tạo một đối tượng upload sử dụng cài đặt bộ nhớ trữ.
3. Chúng ta xác định một route cho form tải lên và một route khác để xử lý tệp tải lên.
4. Trong route tải lên, chúng ta sử dụng upload.single('filetoupload') để xử lý một tệp tải lên.

Xử lý Tải lên Nhiều Tệp với Multer

Multer làm cho việc xử lý tải lên nhiều tệp rất dễ dàng. Dưới đây là cách:

app.post('/upload', upload.array('filetoupload', 12), (req, res, next) => {
const files = req.files;
if (!files) {
const error = new Error('Vui lòng chọn tệp');
error.httpStatusCode = 400;
return next(error);
}
res.send(files);
});

Thay đổi chính ở đây là sử dụng upload.array('filetoupload', 12) thay vì upload.single(). Số '12' chỉ định tối đa 12 tệp.

So sánh Formidable và Multer

Bây giờ chúng ta đã xem cả hai Formidable và Multer trong hành động, hãy so sánh chúng:

Tính năng	Formidable	Multer
Dễ sử dụng	Đơn giản và dễ hiểu	Cần nhiều thiết lập hơn nhưng cung cấp nhiều quyền kiểm soát hơn
Tích hợp	Làm việc với bất kỳ máy chủ Node.js nào	Được thiết kế để làm việc với Express
Xử lý tệp	Có thể xử lý cả tệp và trường	Được thiết kế đặc biệt cho việc tải lên tệp
Tùy chỉnh	Ít tùy chỉnh	Rất tùy chỉnh

Kết luận

Chúc mừng! Bạn đã nâng cấp kỹ năng Node.js của mình bằng cách học cách xử lý tải lên tệp. Dù bạn chọn Formidable vì sự đơn giản hay Multer vì quyền kiểm soát và tùy chỉnh, bạn đã sẵn sàng để thêm chức năng tải lên tệp vào các ứng dụng Node.js của mình.

Nhớ rằng, thực hành làm nên hoàn hảo. Thử xây dựng một dự án nhỏ sử dụng tải lên tệp - có thể là một ứng dụng chia sẻ ảnh đơn giản hoặc hệ thống lưu trữ tài liệu. Càng viết mã nhiều hơn, bạn sẽ càng thoải mái hơn với các khái niệm này.

Chúc bạn vui vẻ lập trình, và may mắn với các tải lên của bạn!

Credits: Image by storyset