Gửi biểu mẫu nodejs
|
Phần này vì mình đã hướng dẫn ở bài Tìm hiểu 3 Mô-đun tích hợp sẵn 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é Constructor application directory application as after tải lên lượt xem bậc thầy. html bưu kiện. json người phục vụ. 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ẻ Kết quả sau khi chạy ứng dụng. 2. Xử lý Upload file với FormidableNói qua về anh 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à module giúp chúng ta phân tích dữ liệu biểu mẫu, cụ thể là tập trung vào việc mã hóa hình ảnh và video, hay nói dễ hiểu Một số tính năng mà mô-đun 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 sử dụng module này cho việc upload nhé “Hơn nữa, trong ví dụ dưới đây, mình sẽ sử dụng các mô-đun http-fs-url để tạo máy chủ và kết hợp sử dụng đáng kể để xử lý tệp tải lên. Un used framework express. js nhé, thể hiện. js to part 3 mình sẽ làm ví dụ với multer. ” Cài đặt mô-đun. Tại máy chủ tập tin. js có 2 công 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õ những đoạn mã 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 =)))) Upload ảnh thành công Upload file tin trungquandev. txt thành công Kiểm tra tra cứu trong thư mục Ngoài ra, mô-đun 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 tệp tải lên biểu mẫu. maxFileSize…vv, thì có thể xem thêm tại đây nhé. Ghê gớm – 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 ghê gớm (2.206.310 lượt) nhưng đổi lại thì số sao trên repo github của nó lại cao hơn . Một điểm cộng nữa là Multer có thể sử dụng dễ dàng như một phần mềm trung gian đối với một nút ứng dụng. js chạy trên framework Express. js, chắc nhờ thằng Express này nổi tiếng nên số sao của nó cũng cao, bởi vì rất nhiều người mới đầu tiếp cận với nút. js cũng đều học Express. js first. (Mình là một từ điển 😀 ) Hiện tại mình sẽ làm 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 đặt cho mình 2 thằng express và multer
________số 8 Bên ra mình có sử dụng thêm một mô-đun tích hợp sẵn trong nút. js là “đường dẫn” để 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 note một bức tranh mùa đông nữa của mình, đừng cười nhé =))))) Tải lên thành công Khi tải lên bị lỗi Kiểm tra tra cứu trong thư mục 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. 4. Mã nguồn đầy đủ trên githubMình có để full source code của bài viết hôm nay tại repo này cho các bạn tham khảo nhé, nếu thấy bài viết bổ ích hãy ủng hộ bằng cách cho mình 1 sao trên repo này để mình có động lực tiếp . 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ỉ 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é |
