nodejs-upload-files-trungquandev

Upload files trong Node.js?

Xin chào tất cả các bạn, mình là Quân, tiếp tục series về Node.js, hôm nay chúng ta sẽ cùng nhau đi tìm hiểu hai cách để upload files trong ứng dụng Node.js nhé.

“Bài này thuộc bài số 06 trong loạt bài Lập Trình Nodejs Cơ Bản.

Những nội dung có trong bài:

  1. Tạo sẵn giao diện Form Upload
  2. Xử lý Upload file với Formidable
  3. Xử lý Upload file với Multer

1. Tạo sẵn giao diện Form Upload

Phần này vì mình đã hướng dẫn ở bài Tìm hiểu 3 Modules Built-in trong Node.js: HTTP – URL – File System nên mình sẽ không giải thích nhiều mà paste code vào luôn thôi nhé:

Cấu trúc thư mục ứng dụng như sau:

uploads

views

master.html

package.json

server.js

  • Nội dung file server.js

  • Nội dung file master.html

“Lưu ý là trong thẻ <form> ở trên phải có một thuộc tính là enctype=”multipart/form-data” và thẻ <input> phải có một cái name ví dụ như name=”file” ở trên nhé.”

Kết quả sau khi chạy ứng dụng: node server.js

nodejs-upload-files-trungquandev-01

2. Xử lý Upload file với Formidable

Nói qua về thằng này một chút, mình trích lời giới thiệu chính thức của Formidable thì nó là một module giúp chúng ta phân tích dữ liệu biểu mẫu, đặc biệt là tập trung vào việc encoding các hình ảnh và video, hay nói dễ hiểu và ngắn gọn hơn là tập trung vào việc tải lên các tệp tin.

Một số tính năng mà module này liệt kê ra như sau:

  • Non-buffering multipart parser: Tốc độ cao, lên tới xấp xỉ 500mb/giây và không cần bộ nhớ đệm cho việc phân tích cú pháp.
  • Automatically writing file uploads to disk: Tự động ghi lại các tập tin tải lên.
  • Graceful error handling: Cú pháp bắt lỗi & xử lý lỗi dễ dàng. 
  • Low memory footprint: Có thể hiểu đơn giản là thư viện này ăn ít Ram.
  • Very high test coverage: Thư viện này đã được viết test rất cẩn thận (theo như chúng nó nói =))

Rồi, xem qua lý thuyết như vậy thôi, mình sẽ bắt đầu triển khai một ví dụ để các bạn biết cách dùng module này cho việc upload nhé:

“Cụ thể hơn, trong ví dụ dưới đây, mình sẽ sử dụng các module http-fs-url để tạo server, và kết hợp dùng formidable để xử lý upload file. Chưa dùng framework express.js nhé, express.js để phần 3 mình sẽ làm ví dụ với multer.”

Cài đặt module: npm install --save formidable hoặc npm i -S formidable

Ở file server.js có 2 việc cần làm:

  • Việc đầu tiên là chúng ta nạp module formidable:
  • Việc thứ hai là viết thêm một đoạn code kiểm tra điều kiện upload file bên trong function createServer()

– Nội dung file server.js sau khi thay đổi như sau (mình đã comment giải thích rõ ràng những đoạn code mới thêm vào rồi nha)

Kết quả: Một bức tranh con mèo do mình vẽ, cho mình khoe chút =))))

Upload ảnh thành công:

nodejs-upload-files-trungquandev-02

Upload tệp tin trungquandev.txt thành công:

nodejs-upload-files-trungquandev-03

Kiểm tra trong thư mục:

nodejs-upload-files-trungquandev-04

Ngoài ra module này mở rộng thêm nhiều tính năng nữa ví dụ như giới hạn kích thước file tải lên form.maxFileSize…vv, thì có thể xem thêm ở đây nhé: Formidable – npm


3. Xử lý Upload file với Multer

Multer cũng là một module khá nổi tiếng, tuy lượt dowload hàng tuần rất khiêm tốn là (421,391 lượt) thấp hơn so với formidable (2,206,310 lượt) nhưng đổi lại thì số star trên repo github của nó lại cao hơn (6192 star) so với (4849 star) của formidable.
“Lưu ý số liệu này là tính đến thời điểm hiện tại mình viết bài, sau này có thể sẽ khác.”

Một điểm cộng nữa là Multer có thể sử dụng dễ dàng như một middleware đối với một ứng dụng node.js chạy trên framework Express.js, chắc nhờ fame thằng Express này nên số star của nó cũng cao, bởi vì rất nhiều người mới đầu tiếp cận với node.js cũng đều học Express.js đầu tiên. (Mình là một điển hình 😀 )

Bây giờ mình sẽ làm ví dụ upload file sử dụng kết hợp Multer và Express.js nhé.
(Dĩ nhiên là các bạn cũng có thể kết hợp Formidable với Express.js hay là Multer với http-fs-url như ở phần 2 nhé, cần support thì cứ thoải mái comment hỏi mình 😀 )

Trước tiên, các bạn cài cho mình 2 thằng expressmulter:

npm install --save express

npm install --save multer

Ngoài ra mình có sử dụng thêm một module tích hợp sẵn trong node.js là “path” để lấy đường dẫn gốc của thư mục.
Cụ thể, chúng ta sẽ viết lại file server.js như sau:

Kết quả: Khoe nốt một bức tranh mùa đông nữa của mình, đừng cười nhé =)))))

Upload thành công:

nodejs-upload-files-trungquandev-05

Khi upload lỗi:

nodejs-upload-files-trungquandev-06

Kiểm tra trong thư mục:

nodejs-upload-files-trungquandev-07

Các bạn cũng có thể đọc thêm về multer nhé, mình chỉ hướng dẫn cơ bản thôi, đi sâu vào nó còn nhiều tính năng hơn nữa ở đây:
https://www.npmjs.com/package/multer


Trên đây mình đã hướng dẫn upload file trong node.js bằng 2 cách, nhưng như các bạn thấy là chúng ta mới chỉ đang upload một lần một file thôi. Bài tiếp theo mình sẽ xử lý việc Upload nhiều file cùng lúc trong node.js nhé.

Xin chào và hẹn gặp lại các bạn ở những bài viết tiếp theo.

Best Regards – Trung Quân – Green Cat


Tham khảo kiến thức:

https://www.npmjs.com/package/formidable

https://www.npmjs.com/package/multer

“Thanks for awesome knowledges.”

trungquandev-img-modal