ในส่วนนี้เราจะใช้ผู้ใช้อัปโหลดรูปภาพและแสดงภาพในเบราว์เซอร์
โมดูลภายนอกที่เราต้องการใช้ที่นี่คือโมดูลที่กำหนดได้จากโหนดที่พัฒนาโดย Felix Geisendörfer มันทำให้เป็นนามธรรมที่ดีของการแยกวิเคราะห์ข้อมูลไฟล์ที่อัปโหลด
ในการติดตั้งโมดูลภายนอกนี้คุณต้องดำเนินการคำสั่งภายใต้ CMD:
การคัดลอกรหัสมีดังนี้:
NPM ติดตั้งที่น่ากลัว
หากคุณส่งออกข้อมูลที่คล้ายกันหมายความว่าการติดตั้งสำเร็จแล้ว:
การคัดลอกรหัสมีดังนี้:
ข้อมูล npm สร้างความสำเร็จ: [email protected]
หลังจากการติดตั้งสำเร็จเราสามารถใช้คำขอเพื่อแนะนำ:
การคัดลอกรหัสมีดังนี้:
var actiDable = ต้องการ ("น่ากลัว");
โมดูลนี้ทำอะไรที่นี่คือการแก้ไขแบบฟอร์มที่ส่งผ่านคำขอโพสต์ HTTP ใน node.js สิ่งที่เราต้องทำคือสร้างขาเข้าใหม่ซึ่งเป็นตัวแทนนามธรรมของแบบฟอร์มที่ส่ง หลังจากนั้นเราสามารถใช้มันเพื่อแยกวัตถุคำขอและรับฟิลด์ข้อมูลที่ต้องการในแบบฟอร์ม
ไฟล์รูปภาพในกรณีนี้จะถูกเก็บไว้ในโฟลเดอร์ /TMP
ก่อนอื่นมาแก้ปัญหา: เราจะแสดงไฟล์ที่บันทึกไว้ในฮาร์ดไดรฟ์ท้องถิ่นในเบราว์เซอร์ได้อย่างไร
เราใช้โมดูล FS เพื่ออ่านไฟล์ไปยังเซิร์ฟเวอร์
ลองเพิ่ม /showurl Request Handler ซึ่ง Hardcodes ไฟล์ /tmp/test.png เนื้อหาไปยังเบราว์เซอร์ แน่นอนคุณต้องบันทึกภาพไปยังตำแหน่งนี้ก่อน
ทีมของเรา requesthandlers.js ทำการแก้ไขบางอย่าง:
การคัดลอกรหัสมีดังนี้:
var queryString = require ("querystring")
fs = ต้องการ ("fs");
ฟังก์ชั่นเริ่มต้น (การตอบสนอง, postdata) {
console.log ("คำขอเริ่มต้น 'start' ถูกเรียก");
var body = '<html>'+
'<head>'+
'<meta http-equiv = "content-type"'+
'content = "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 ();
-
ฟังก์ชั่นแสดง (การตอบสนอง, postdata) {
console.log ("คำขอ handler 'show' ถูกเรียก");
fs.readfile ("/tmp/test.png", "ไบนารี", ฟังก์ชั่น (ข้อผิดพลาด, ไฟล์) {
ถ้า (ข้อผิดพลาด) {
Response.writehead (500, {"เนื้อหาประเภท": "ข้อความ/ธรรมดา"});
Response.write (ข้อผิดพลาด + "/n");
Response.end ();
} อื่น {
Response.writehead (200, {"เนื้อหาประเภท": "image/png"});
Response.write (ไฟล์ "ไบนารี");
Response.end ();
-
-
-
ExportS.Start = Start;
ExportS.UPLOAD = อัปโหลด;
การส่งออก show = แสดง;
นอกจากนี้เรายังต้องเพิ่มตัวจัดการคำขอใหม่นี้ลงในตารางแผนที่เส้นทางใน index.js:
การคัดลอกรหัสมีดังนี้:
var server = ต้องการ ("./ เซิร์ฟเวอร์");
var เราเตอร์ = ต้องการ ("./ เราเตอร์");
var requesthandlers = ต้องการ ("./ requesthandlers");
var handle = {}
จัดการ ["/"] = requesthandlers.start;
จัดการ ["/start"] = requesthandlers.start;
จัดการ ["/อัปโหลด"] = requesthandlers.upload;
จัดการ ["/show"] = requesthandlers.show;
Server.Start (Router.Route, Handle);
หลังจากรีสตาร์ทเซิร์ฟเวอร์โดยไปที่ http: // localhost: 8888/show คุณสามารถดูรูปภาพที่บันทึกไว้ใน /tmp/test.png
ตกลงในที่สุดเราก็ต้องการ:
เพิ่มองค์ประกอบการอัปโหลดไฟล์ในแบบฟอร์ม /เริ่มต้น
รวมโหนดที่กำหนดไว้ในตัวจัดการคำขออัปโหลดของเราเพื่อบันทึกรูปภาพที่อัปโหลดไปยัง /tmp/test.png
ฝังอิมเมจที่อัปโหลดลงในเอาต์พุต html จาก /uploadurl
รายการแรกนั้นง่าย เพียงเพิ่มประเภทการเข้ารหัสแบบหลายส่วน/ฟอร์ม-ข้อมูลในแบบฟอร์ม HTML ลบพื้นที่ข้อความก่อนหน้าเพิ่มส่วนประกอบอัปโหลดไฟล์และเปลี่ยนสำเนาของปุ่มส่งเป็น "อัปโหลดไฟล์" ดังที่แสดงใน quorkhandler.js ดังนี้:
การคัดลอกรหัสมีดังนี้:
var queryString = require ("querystring")
fs = ต้องการ ("fs");
ฟังก์ชั่นเริ่มต้น (การตอบสนอง, postdata) {
console.log ("คำขอเริ่มต้น 'start' ถูกเรียก");
var body = '<html>'+
'<head>'+
'<meta http-equiv = "content-type"'+
'content = "text /html; charset = utf-8" />'+
'</head>'+
'<body>'+
'<form action = "/upload" enctype = "multipart/form-data"'+
'method = "post">'+
'<อินพุต type = "file" name = "upload">'+
'<อินพุต 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 ();
-
ฟังก์ชั่นแสดง (การตอบสนอง, postdata) {
console.log ("คำขอ handler 'show' ถูกเรียก");
fs.readfile ("/tmp/test.png", "ไบนารี", ฟังก์ชั่น (ข้อผิดพลาด, ไฟล์) {
ถ้า (ข้อผิดพลาด) {
Response.writehead (500, {"เนื้อหาประเภท": "ข้อความ/ธรรมดา"});
Response.write (ข้อผิดพลาด + "/n");
Response.end ();
} อื่น {
Response.writehead (200, {"เนื้อหาประเภท": "image/png"});
Response.write (ไฟล์ "ไบนารี");
Response.end ();
-
-
-
ExportS.Start = Start;
ExportS.UPLOAD = อัปโหลด;
การส่งออก show = แสดง;
ต่อไปเราต้องทำขั้นตอนที่สองให้เสร็จ เราเริ่มต้นด้วย server.js - ลบการประมวลผลของ postdata และ request.setencoding (ส่วนนี้ของ node -ateridable จะจัดการเอง) และส่งวัตถุคำขอไปยังเส้นทางคำขอ: แทนที่จะส่ง
การคัดลอกรหัสมีดังนี้:
var http = ต้องการ ("http");
var url = ต้องการ ("url");
ฟังก์ชั่นเริ่มต้น (เส้นทาง, ด้ามจับ) {
ฟังก์ชั่น onRequest (คำขอการตอบกลับ) {
var pathName = url.parse (request.url) .pathName;
console.log ("ขอ" + pathname + "ได้รับ");
เส้นทาง (ด้ามจับ, ชื่อพา ธ , การตอบสนอง, คำขอ);
-
http.createserver (onrequest) .Listen (8888);
console.log ("เซิร์ฟเวอร์เริ่มต้นแล้ว");
-
ExportS.Start = Start;
ถัดไปแก้ไขเราเตอร์ Js และครั้งนี้คุณต้องผ่านวัตถุคำขอ:
การคัดลอกรหัสมีดังนี้:
เส้นทางฟังก์ชัน (มือจับ, ชื่อพา ธ , การตอบสนอง, คำขอ) {
console.log ("เกี่ยวกับการกำหนดเส้นทางสำหรับ" + ชื่อพา ธ );
if (typeof handle [pathname] === 'function') {
จัดการ [ชื่อพา ธ ] (การตอบสนองการร้องขอ);
} อื่น {
console.log ("ไม่พบตัวจัดการคำขอสำหรับ" + ชื่อพา ธ );
Response.writehead (404, {"เนื้อหาประเภท": "ข้อความ/html"});
Response.write ("404 ไม่พบ");
Response.end ();
-
-
exports.route = เส้นทาง;
ตอนนี้วัตถุคำขอสามารถใช้ในตัวจัดการคำขออัปโหลดของเรา node-atfidable จะจัดการการบันทึกไฟล์ที่อัปโหลดไปยังไดเรกทอรี Local /TMP และเราต้องการ
สิ่งที่คุณต้องการทำคือตรวจสอบให้แน่ใจว่าไฟล์ถูกบันทึกเป็น /tmp/test.png
ต่อไปเราจะรวบรวมการดำเนินการอัปโหลดและเปลี่ยนชื่อไฟล์ประมวลผลดังที่แสดงใน quorkhandlers.js:
การคัดลอกรหัสมีดังนี้:
var queryString = require ("querystring")
fs = ต้องการ ("fs")
น่ากลัว = ต้องการ ("น่ากลัว");
ฟังก์ชั่นเริ่มต้น (ตอบกลับ) {
console.log ("คำขอเริ่มต้น 'start' ถูกเรียก");
var body = '<html>'+
'<head>'+
'<meta http-equiv = "content-type" เนื้อหา = "text/html;'+
'charset = utf-8 " />'+
'</head>'+
'<body>'+
'<form action = "/upload" enctype = "multipart/form-data"'+
'method = "post">'+
'<อินพุต type = "file" name = "upload" multriay = "multiple">'+
'<อินพุต type = "ส่ง" value = "อัปโหลดไฟล์" />'+
'</form>'+
'</body>'+
'</html>';
Response.writehead (200, {"เนื้อหาประเภท": "ข้อความ/html"});
Response.write (ร่างกาย);
Response.end ();
-
การอัพโหลดฟังก์ชั่น (การตอบกลับคำขอ) {
console.log ("คำขอตัวจัดการ 'อัพโหลด' ถูกเรียกว่า");
var form = new actidable.inomingForm ();
console.log ("เกี่ยวกับการแยกวิเคราะห์");
form.parse (คำขอ, ฟังก์ชัน (ข้อผิดพลาด, ฟิลด์, ไฟล์) {
console.log ("การแยกวิเคราะห์เสร็จ");
fs.renamesync (files.upload.path, "/tmp/test.png");
Response.writehead (200, {"เนื้อหาประเภท": "ข้อความ/html"});
Response.write ("ภาพที่ได้รับ: <br/>");
Response.write ("<img src = ' /show' />");
Response.end ();
-
-
ฟังก์ชั่นแสดง (ตอบกลับ) {
console.log ("คำขอ handler 'show' ถูกเรียก");
fs.readfile ("/tmp/test.png", "ไบนารี", ฟังก์ชั่น (ข้อผิดพลาด, ไฟล์) {
ถ้า (ข้อผิดพลาด) {
Response.writehead (500, {"เนื้อหาประเภท": "ข้อความ/ธรรมดา"});
Response.write (ข้อผิดพลาด + "/n");
Response.end ();
} อื่น {
Response.writehead (200, {"เนื้อหาประเภท": "image/png"});
Response.write (ไฟล์ "ไบนารี");
Response.end ();
-
-
-
ExportS.Start = Start;
ExportS.UPLOAD = อัปโหลด;
การส่งออก show = แสดง;
ด้วยการทำเช่นนี้เซิร์ฟเวอร์ของเราเสร็จสมบูรณ์
ในระหว่างกระบวนการอัพโหลดรูปภาพบางคนอาจพบปัญหาดังกล่าว:
ฉันเดาว่าเหตุผลสำหรับปัญหานี้เกิดจากพาร์ติชันดิสก์ ในการแก้ปัญหานี้คุณต้องเปลี่ยนเส้นทางโฟลเดอร์ศูนย์เวลาเริ่มต้นของความน่ากลัวเพื่อให้แน่ใจว่าอยู่ในพาร์ติชันดิสก์เดียวกับไดเรกทอรีเป้าหมาย
เราพบฟังก์ชั่นการอัปโหลดของ quorkhandlers.js และทำการแก้ไขบางอย่าง:
การคัดลอกรหัสมีดังนี้:
การอัพโหลดฟังก์ชั่น (การตอบกลับคำขอ) {
console.log ("คำขอตัวจัดการ 'อัพโหลด' ถูกเรียกว่า");
var form = new actidable.inomingForm ();
console.log ("เกี่ยวกับการแยกวิเคราะห์");
form.uploaddir = "tmp";
form.parse (คำขอ, ฟังก์ชัน (ข้อผิดพลาด, ฟิลด์, ไฟล์) {
console.log ("การแยกวิเคราะห์เสร็จ");
fs.renamesync (files.upload.path, "/tmp/test.png");
Response.writehead (200, {"เนื้อหาประเภท": "ข้อความ/html"});
Response.write ("ภาพที่ได้รับ: <br/>");
Response.write ("<img src = ' /show' />");
Response.end ();
-
-
เราเพิ่มแบบฟอร์มประโยค uploaddir = "tmp" ตอนนี้รีสตาร์ทเซิร์ฟเวอร์แล้วดำเนินการอัปโหลด ปัญหาได้รับการแก้ไขอย่างสมบูรณ์แบบ