จนถึงตอนนี้เซิร์ฟเวอร์ที่เราทำนั้นไม่มีการใช้งานจริงดังนั้นเราจะเริ่มใช้ฟังก์ชั่นที่ใช้งานได้จริงและมีประโยชน์
สิ่งที่เราต้องทำคือ: ผู้ใช้เลือกไฟล์อัปโหลดไฟล์แล้วเห็นไฟล์ที่อัปโหลดในเบราว์เซอร์
ก่อนอื่นเราต้องมี textarea สำหรับผู้ใช้ในการป้อนเนื้อหาจากนั้นส่งไปยังเซิร์ฟเวอร์ผ่านคำขอโพสต์
เราเพิ่มรหัสลงในตัวจัดการเหตุการณ์เริ่มต้นและแก้ไข quorkhandlers.js ดังนี้:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นเริ่มต้น (ตอบกลับ) {
console.log ("คำขอเริ่มต้น 'start' ถูกเรียก");
var body = '<html>'+ '<head>'+
'<meta http-equiv = "content-type" เนื้อหา = "text/html;'+
'charset = utf-8 " />'+
'</head>'+
'<body>'+
'<form action = "/upload" method = "post">'+
'<textarea name = "text" rows = "20" cols = "60"> </textarea>'+
'<อินพุต type = "ส่ง" value = "ส่งข้อความ" />'+
'</form>'+
'</body>'+
'</html>';
Response.writehead (200, {"เนื้อหาประเภท": "ข้อความ/html"});
Response.write (ร่างกาย);
Response.end ();
-
การอัพโหลดฟังก์ชั่น (ตอบกลับ) {
console.log ("คำขอตัวจัดการ 'อัพโหลด' ถูกเรียกว่า");
Response.writehead (200, {"เนื้อหาประเภท": "ข้อความ/ธรรมดา"});
Response.write ("สวัสดีอัปโหลด");
Response.end ();
-
ExportS.Start = Start;
ExportS.UPLOAD = อัปโหลด;
คุณสามารถดูเอฟเฟกต์ได้โดยไปที่ http: // localhost: 8888/เริ่มในเบราว์เซอร์ของคุณ
ต่อไปเราต้องการใช้ทริกเกอร์ของตัวจัดการคำขอ /อัปโหลดเพื่อจัดการคำขอโพสต์เมื่อผู้ใช้ส่งแบบฟอร์ม
เพื่อให้กระบวนการทั้งหมดไม่ปิดกั้น Node.js จะแบ่งข้อมูลโพสต์ออกเป็นบล็อกข้อมูลขนาดเล็กจำนวนมากจากนั้นส่งผ่านบล็อกข้อมูลขนาดเล็กเหล่านี้ไปยังฟังก์ชั่นการโทรกลับโดยการเรียกเหตุการณ์เฉพาะ เหตุการณ์เฉพาะที่นี่รวมถึงเหตุการณ์ข้อมูล (ระบุว่าบล็อกข้อมูลขนาดเล็กใหม่มาถึงแล้ว) และเหตุการณ์สิ้นสุด (ระบุว่าได้รับข้อมูลทั้งหมดแล้ว)
เราทำสิ่งนี้โดยการลงทะเบียนผู้ฟังในวัตถุคำขอ วัตถุคำขอที่นี่จะถูกส่งผ่านไปยังฟังก์ชั่นการโทรกลับ onrequest ทุกครั้งที่ได้รับคำขอ HTTP
เราใส่รหัสในเซิร์ฟเวอร์และแก้ไข Server.js ดังนี้:
การคัดลอกรหัสมีดังนี้:
var http = ต้องการ ("http");
var url = ต้องการ ("url");
ฟังก์ชั่นเริ่มต้น (เส้นทาง, ด้ามจับ) {
ฟังก์ชั่น onRequest (คำขอการตอบกลับ) {
var postdata = "";
var pathName = url.parse (request.url) .pathName;
console.log ("ขอ" + pathname + "ได้รับ");
request.setEncoding ("UTF8");
request.addListener ("data", function (postdatachunk) {
postdata += postdatachunk;
console.log ("ได้รับโพสต์ข้อมูล chunk '" + postdatachunk + "'.");
-
request.addlistener ("end", function () {
เส้นทาง (ด้ามจับ, ชื่อพา ธ , การตอบสนอง, postdata);
-
-
http.createserver (onrequest) .Listen (8888);
console.log ("เซิร์ฟเวอร์เริ่มต้นแล้ว");
-
ExportS.Start = Start;
รหัสข้างต้นทำสามสิ่ง: ก่อนอื่นเราตั้งค่ารูปแบบการเข้ารหัสของข้อมูลที่ได้รับเป็น UTF-8 จากนั้นลงทะเบียนฟังเหตุการณ์ "ข้อมูล" เพื่อรวบรวมบล็อกข้อมูลใหม่ในแต่ละครั้งและกำหนดให้กับตัวแปร postdata ในที่สุดเราย้ายการโทรขอเส้นทางไปยังตัวจัดการเหตุการณ์สิ้นสุดเพื่อให้แน่ใจว่าจะยิงเมื่อข้อมูลทั้งหมดได้รับและไฟเพียงครั้งเดียวเท่านั้น นอกจากนี้เรายังส่งข้อมูลโพสต์เพื่อขอเส้นทางเนื่องจากข้อมูลนี้จะถูกใช้โดยตัวจัดการคำขอ
ถัดไปในหน้า /อัปโหลดแสดงอินพุตของผู้ใช้
ลองเปลี่ยนเราเตอร์ js:
การคัดลอกรหัสมีดังนี้:
เส้นทางฟังก์ชัน (มือจับ, ชื่อพา ธ , การตอบสนอง, postdata) {
console.log ("เกี่ยวกับการกำหนดเส้นทางสำหรับ" + ชื่อพา ธ );
if (typeof handle [pathname] === 'function') {
จัดการ [ชื่อพา ธ ] (การตอบสนอง, postdata);
} อื่น {
console.log ("ไม่พบตัวจัดการคำขอสำหรับ" + ชื่อพา ธ );
Response.writehead (404, {"เนื้อหาประเภท": "ข้อความ/ธรรมดา"});
Response.write ("404 ไม่พบ");
Response.end ();
-
-
exports.route = เส้นทาง;
จากนั้นใน quorkhandlers.js เรารวมข้อมูลไว้ในการตอบสนองต่อคำขออัปโหลด:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นเริ่มต้น (การตอบสนอง, postdata) {
console.log ("คำขอเริ่มต้น 'start' ถูกเรียก");
var body = '<html>'+
'<head>'+
'<meta http-equiv = "content-type" เนื้อหา = "text/html;'+
'charset = utf-8 " />'+
'</head>'+
'<body>'+
'<form action = "/upload" method = "post">'+
'<textarea name = "text" rows = "20" cols = "60"> </textarea>'+
'<อินพุต type = "ส่ง" value = "ส่งข้อความ" />'+
'</form>'+
'</body>'+
'</html>';
Response.writehead (200, {"เนื้อหาประเภท": "ข้อความ/html"});
Response.write (ร่างกาย);
Response.end ();
-
การอัปโหลดฟังก์ชั่น (การตอบสนอง, postdata) {
console.log ("คำขอตัวจัดการ 'อัพโหลด' ถูกเรียกว่า");
Response.writehead (200, {"เนื้อหาประเภท": "ข้อความ/ธรรมดา"});
Response.write ("คุณส่ง:" + postdata);
Response.end ();
-
ExportS.Start = Start;
ExportS.UPLOAD = อัปโหลด;
สิ่งสุดท้ายที่เราต้องทำคือ: ขณะนี้เราผ่านเนื้อหาข้อความทั้งหมดของคำขอไปยังการกำหนดเส้นทางคำขอและตัวจัดการคำขอ เราควรส่งผ่านข้อมูลโพสต์เท่านั้นส่วนที่เราสนใจไปยังการกำหนดเส้นทางคำขอและคำขอตัวจัดการ ในตัวอย่างของเราสิ่งที่เราสนใจคือฟิลด์ข้อความ
เราสามารถใช้โมดูล QueryString ที่แนะนำก่อนหน้านี้เพื่อนำไปใช้:
การคัดลอกรหัสมีดังนี้:
var queryString = ต้องการ ("querystring");
ฟังก์ชั่นเริ่มต้น (การตอบสนอง, postdata) {
console.log ("คำขอเริ่มต้น 'start' ถูกเรียก");
var body = '<html>'+
'<head>'+
'<meta http-equiv = "content-type" เนื้อหา = "text/html;'+
'charset = utf-8 " />'+
'</head>'+
'<body>'+
'<form action = "/upload" method = "post">'+
'<textarea name = "text" rows = "20" cols = "60"> </textarea>'+
'<อินพุต type = "ส่ง" value = "ส่งข้อความ" />'+
'</form>'+
'</body>'+
'</html>';
Response.writehead (200, {"เนื้อหาประเภท": "ข้อความ/html"});
Response.write (ร่างกาย);
Response.end ();
-
การอัปโหลดฟังก์ชั่น (การตอบสนอง, postdata) {
console.log ("คำขอตัวจัดการ 'อัพโหลด' ถูกเรียกว่า");
Response.writehead (200, {"เนื้อหาประเภท": "ข้อความ/ธรรมดา"});
Response.write ("คุณส่งข้อความ:"+ querystring.parse (postdata) .Text);
Response.end ();
-
ExportS.Start = Start;
ExportS.UPLOAD = อัปโหลด;
ตกลงข้างต้นคือทั้งหมดที่เกี่ยวกับการประมวลผลข้อมูลโพสต์
ในส่วนถัดไปเราจะใช้ฟังก์ชั่นของการอัปโหลดรูปภาพ