Hướng dẫn upload pdf file nodejs - tải lên tệp pdf nodejs
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.“ 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 UploadTạo sẵn giao diện Form UploadPhầ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é: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
/**
* Created by trungquandev.com's author on 10/03/2019.
* server.js
*/
let http = require("http");
let url = require("url");
let fs = require("fs");
let server = http.createServer((req, res) => {
let urlData = url.parse(req.url, true);
let fileName = "./views" + urlData.pathname;
if(urlData.pathname === "/") {
fileName = "./views/master.html";
}
fs.readFile(fileName, (err, data) => {
if(err) {
console.log(err);
res.writeHead(404, {"Content-Type": "text/html"});
res.write("404 Not Found");
return res.end();
}
res.writeHead(200, {"Content-Type": "text/html"});
res.write(data);
return res.end();
});
});
server.listen(8017, "localhost", () => {
console.log(`Hello Trung Quan, I'm running at localhost:8017/`);
});
“Lưu ý là trong thẻ ở trên phải có một thuộc tính là enctype=”multipart/form-data” và thẻ phải có một cái name ví dụ như name=”file” ở trên nhé.”enctype=”multipart/form-data” và thẻ 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:  2. Xử lý Upload file với FormidableNó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.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:
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.”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: Ở file server.js có 2 việc cần làm: server.js có 2 việc cần làm:
– 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)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) /**
* Created by trungquandev.com's author on 10/03/2019.
* server.js
*/
let http = require("http");
let url = require("url");
let fs = require("fs");
let formidable = require("formidable");
let server = http.createServer((req, res) => {
// Kiểm tra nếu như url truyền lên là /upload và phương thức là post
if (req.url == "/upload" && req.method.toLowerCase() == "post") {
// Khởi tạo biến form bằng IncomingForm để phân tích một tập tin tải lên
let form = new formidable.IncomingForm();
// Cấu hình thư mục sẽ chứa file trên server với hàm .uploadDir
form.uploadDir = "uploads/"
// Xử lý upload file với hàm .parse
form.parse(req, (err, fields, files) => {
if (err) throw err;
// Lấy ra đường dẫn tạm của tệp tin trên server
let tmpPath = files.file.path;
// Khởi tạo đường dẫn mới, mục đích để lưu file vào thư mục uploads của chúng ta
let newPath = form.uploadDir + files.file.name;
// Đổi tên của file tạm thành tên mới và lưu lại
fs.rename(tmpPath, newPath, (err) => {
if (err) throw err;
switch (files.file.type) {
// Kiểm tra nếu như là file ảnh thì render ảnh và hiển thị lên.
case "image/jpeg":
fs.readFile(newPath, (err, fileUploaded) => {
res.writeHead(200,{"Content-type":"image/jpeg"});
res.end(fileUploaded);
});
break;
// Còn lại các loại file khác thì chỉ hiển thị nội dung thông báo upload thành công.
default:
res.writeHead(200, {"Content-Type": "text/html"});
res.end(`Upload file ${files.file.name} successfuly`);
break;
}
});
});
// Return ở đây để code không chạy tiếp xuống dưới
return;
}
// Nếu không phải action upload thì trả về client cái form upload
let urlData = url.parse(req.url, true);
let fileName = "./views" + urlData.pathname;
if(urlData.pathname === "/") {
fileName = "./views/master.html";
}
fs.readFile(fileName, (err, data) => {
if(err) {
console.log(err);
res.writeHead(404, {"Content-Type": "text/html"});
res.write("404 Not Found");
return res.end();
}
res.writeHead(200, {"Content-Type": "text/html"});
res.write(data);
return res.end();
});
});
server.listen(8017, "localhost", () => {
console.log(`Hello Trung Quan, I'm running at localhost:8017/`);
});Kết quả: Một bức tranh con mèo do mình vẽ, cho mình khoe chút =)))) Một bức tranh con mèo do mình vẽ, cho mình khoe chút =)))) Upload ảnh thành công: Upload tệp tin trungquandev.txt thành công: Kiểm tra trong thư mục: 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 – npmform.maxFileSize…vv, thì có thể xem thêm ở đây nhé: Formidable – npm 3. Xử lý Upload file với MulterMulter 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.” 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. 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 😀 )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 😀 )ví dụ upload file sử dụng kết hợp Multer và Express.js nhé. Trước tiên, các bạn cài cho mình 2 thằng express và multer:express và 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:“path” để lấy đường dẫn gốc của thư mục. /**
* Created by trungquandev.com's author on 11/03/2019.
* server.js
*/
let express = require("express");
let multer = require("multer");
let path = require("path");
let app = express();
// Route này trả về cái form upload cho client
app.get("/", (req, res) => {
res.sendFile(path.join(`${__dirname}/views/master.html`));
});
// Khởi tạo biến cấu hình cho việc lưu trữ file upload
let diskStorage = multer.diskStorage({
destination: (req, file, callback) => {
// Định nghĩa nơi file upload sẽ được lưu lại
callback(null, "uploads");
},
filename: (req, file, callback) => {
// ở đây các bạn có thể làm bất kỳ điều gì với cái file nhé.
// Mình ví dụ chỉ cho phép tải lên các loại ảnh png & jpg
let math = ["image/png", "image/jpeg"];
if (math.indexOf(file.mimetype) === -1) {
let errorMess = `The file ${file.originalname} is invalid. Only allowed to upload image jpeg or png.`;
return callback(errorMess, null);
}
// Tên của file thì mình nối thêm một cái nhãn thời gian để đảm bảo không bị trùng.
let filename = `${Date.now()}-trungquandev-${file.originalname}`;
callback(null, filename);
}
});
// Khởi tạo middleware uploadFile với cấu hình như ở trên,
// Bên trong hàm .single() truyền vào name của thẻ input, ở đây là "file"
let uploadFile = multer({storage: diskStorage}).single("file");
// Route này Xử lý khi client thực hiện hành động upload file
app.post("/upload", (req, res) => {
// Thực hiện upload file, truyền vào 2 biến req và res
uploadFile(req, res, (error) => {
// Nếu có lỗi thì trả về lỗi cho client.
// Ví dụ như upload một file không phải file ảnh theo như cấu hình của mình bên trên
if (error) {
return res.send(`Error when trying to upload: ${error}`);
}
// Không có lỗi thì lại render cái file ảnh về cho client.
// Đồng thời file đã được lưu vào thư mục uploads
res.sendFile(path.join(`${__dirname}/uploads/${req.file.filename}`));
});
});
app.listen(8017, "localhost", () => {
console.log(`Hello Trung Quan, I'm running at localhost:8017/`);
});Kết quả:Khoe nốt một bức tranh mùa đông nữa của mình, đừng cười nhé =)))))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: Khi upload lỗi: Kiểm tra trong thư mục: 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 – npmmulter 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: 3. Xử lý Upload file với MulterMulter 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.” 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é.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.” Khóa học lập trình làm việc thực tế: |
