في هذا القسم ، سنقوم بتنفيذ المستخدم الذي يقوم بتحميل الصورة وعرض الصورة في المتصفح.
الوحدة الخارجية التي نريد استخدامها هنا هي الوحدة النمطية القابلة للتنظيم العقدة التي طورتها Felix Geisendörfer. يجعل تجريدًا جيدًا من تحليل بيانات الملف التي تم تحميلها.
لتثبيت هذه الوحدة الخارجية ، تحتاج إلى تنفيذ الأمر ضمن CMD:
نسخة الكود كما يلي:
NPM تثبيت هائلة
إذا قمت بإخراج معلومات مماثلة ، فهذا يعني أن التثبيت كان ناجحًا:
نسخة الكود كما يلي:
معلومات NPM بناء النجاح: [email protected]
بعد نجاح التثبيت ، يمكننا استخدام الطلب لتقديمه:
نسخة الكود كما يلي:
var dividable = require ("dividable") ؛
ما تفعله هذه الوحدة هنا هو حل النموذج المقدم من خلال طلب نشر HTTP في Node.js. كل ما يتعين علينا فعله هو إنشاء عمل جديد ، وهو تمثيل مجردة للنموذج المقدم. بعد ذلك ، يمكننا استخدامه لتحليل كائن الطلب والحصول على حقول البيانات المطلوبة في النموذج.
يتم تخزين ملفات الصور في هذه الحالة في مجلد /TMP.
دعنا أولاً نحل مشكلة: كيف يمكننا عرض الملفات المحفوظة على القرص الصلب المحلي في المتصفح؟
نستخدم وحدة FS لقراءة الملف إلى الخادم.
دعنا نضيف معالج طلب /showurl ، والذي يتشدد محتوى الملف /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>'+
'<إدخال نوع = "إرسال" value = "إرسال النص" />'+
'</form>'+
'</body>'+
'</html>' ؛
Response.writehead (200 ، {"content-type": "text/html"}) ؛
استجابة. write (الجسم) ؛
استجابة.
}
تحميل الوظيفة (استجابة ، postdata) {
console.log ("تم استدعاء معالج الطلب" تحميل ".") ؛
Response.writehead (200 ، {"content-type": "text/plain"}) ؛
Response.write ("لقد أرسلت النص:"+ QueryString.parse (postdata) .text) ؛
استجابة.
}
عرض الوظيفة (الاستجابة ، postdata) {
console.log ("تم استدعاء" معالج الطلب "" عرض ".") ؛
fs.readfile ("/tmp/test.png" ، "ثنائي" ، وظيفة (خطأ ، ملف) {
إذا (خطأ) {
Response.writehead (500 ، {"content-type": "text/plain"}) ؛
استجابة. write (خطأ + "/n") ؛
استجابة.
} آخر {
Response.writehead (200 ، {"content-type": "Image/PNG"}) ؛
Response.write (ملف ، "ثنائي") ؛
استجابة.
}
}) ؛
}
orports.start = start ؛
orports.upload = تحميل ؛
exports.show = show ؛
نحتاج أيضًا إلى إضافة معالج الطلب الجديد إلى جدول خريطة الطريق في index.js:
نسخة الكود كما يلي:
var server = required ("./ server") ؛
VAR ROUTER = require ("./ Router") ؛
var requestHandlers = require ("./ requestHandlers") ؛
var handle = {}
التعامل مع ["/"] = requestHandlers.start ؛
التعامل ["/start"] = requestHandlers.start ؛
تعامل ["/expload"] = requestHandlers.Upload ؛
تعامل ["/show"] = requestHandlers.show ؛
Server.start (Router.Route ، مقبض) ؛
بعد إعادة تشغيل الخادم ، من خلال زيارة http: // localhost: 8888/show ، يمكنك رؤية الصورة المحفوظة في /tmp/test.png.
حسنًا ، في النهاية نريد:
أضف عنصر تحميل ملف في نموذج /ابدأ
دمج العقدة المنسقة في معالج طلب التحميل الخاص بنا لحفظ الصور التي تم تحميلها على /tmp/test.png
قم بتضمين الصورة التي تم تحميلها في إخراج HTML من /uploadurl
العنصر الأول بسيط. ما عليك سوى إضافة نوع ترميز multipart/form-data في نموذج HTML ، وإزالة منطقة النص السابقة ، وإضافة مكون تحميل الملف ، وتغيير نسخة زر الإرسال إلى "تحميل ملف". كما هو موضح في requestHandler.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 "> '+
'<input type = "file" name = "upload">'+
'<input type = "prident" value = "upload file" />'+
'</form>'+
'</body>'+
'</html>' ؛
Response.writehead (200 ، {"content-type": "text/html"}) ؛
استجابة. write (الجسم) ؛
استجابة.
}
تحميل الوظيفة (استجابة ، postdata) {
console.log ("تم استدعاء معالج الطلب" تحميل ".") ؛
Response.writehead (200 ، {"content-type": "text/plain"}) ؛
Response.write ("لقد أرسلت النص:"+ QueryString.parse (postdata) .text) ؛
استجابة.
}
عرض الوظيفة (الاستجابة ، postdata) {
console.log ("تم استدعاء" معالج الطلب "" عرض ".") ؛
fs.readfile ("/tmp/test.png" ، "ثنائي" ، وظيفة (خطأ ، ملف) {
إذا (خطأ) {
Response.writehead (500 ، {"content-type": "text/plain"}) ؛
استجابة. write (خطأ + "/n") ؛
استجابة.
} آخر {
Response.writehead (200 ، {"content-type": "Image/PNG"}) ؛
Response.write (ملف ، "ثنائي") ؛
استجابة.
}
}) ؛
}
orports.start = start ؛
orports.upload = تحميل ؛
exports.show = show ؛
بعد ذلك ، نحتاج إلى إكمال الخطوة الثانية. نبدأ بـ server.js - قم بإزالة معالجة postdata و request.setencoding (هذا الجزء من العقدة القابلية لتنظيمه سيتعامل معها بنفسها) ، وبدلاً من ذلك تمرير كائن الطلب إلى مسار الطلب:
نسخة الكود كما يلي:
var http = require ("http") ؛
var url = require ("url") ؛
وظيفة بدء (المسار ، مقبض) {
وظيفة onrequest (طلب ، استجابة) {
var pathname = url.parse (request.url) .PathName ؛
console.log ("طلب" + pathname + "تم استلامه.") ؛
الطريق (المقبض ، اسم المسار ، الاستجابة ، الطلب) ؛
}
http.createserver (onrequest) .Listen (8888) ؛
console.log ("بدأ الخادم.") ؛
}
orports.start = start ؛
بعد ذلك ، تعديل Router.js ، وهذه المرة تحتاج إلى تمرير كائن الطلب:
نسخة الكود كما يلي:
طريق الوظيفة (المقبض ، اسم المسار ، الاستجابة ، الطلب) {
console.log ("على وشك توجيه طلب" + pathname) ؛
if (typeof handle [pathname] === 'function') {
التعامل مع [pathname] (الاستجابة ، الطلب) ؛
} آخر {
console.log ("لا يوجد معالج طلب لـ" + pathname) ؛
Response.writehead (404 ، {"content-type": "text/html"}) ؛
استجابة. write ("404 غير موجود") ؛
استجابة.
}
}
orports.route = الطريق ؛
الآن ، يمكن استخدام كائن الطلب في معالج طلب التحميل الخاص بنا. سوف تتعامل مع العقدة المعالجة مع حفظ الملف الذي تم تحميله إلى دليل محلي /TMP ، ونحن بحاجة
ما تريد القيام به هو التأكد من أن الملف يتم حفظه AS /tmp/test.png.
بعد ذلك ، قمنا بتجميع عمليات تحميل ملفات المعالجة وإعادة تسميتها ، كما هو موضح في requestHandlers.js:
نسخة الكود كما يلي:
var QueryString = require ("QueryString") ،
fs = require ("fs") ،
هائل = يتطلب ("هائل") ؛
وظيفة بدء (استجابة) {
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" multives = "multives">'+
'<input type = "prident" value = "upload file" />'+
'</form>'+
'</body>'+
'</html>' ؛
Response.writehead (200 ، {"content-type": "text/html"}) ؛
استجابة. write (الجسم) ؛
استجابة.
}
تحميل الوظيفة (استجابة ، طلب) {
console.log ("تم استدعاء معالج الطلب" تحميل ".") ؛
var form = new MOPIDIDABLE.INCOMINGFORM () ؛
console.log ("على وشك التحليل") ؛
form.parse (طلب ، وظيفة (خطأ ، الحقول ، الملفات) {
console.log ("التحليل المنجز") ؛
fs.renamesync (files.upload.path ، "/tmp/test.png") ؛
Response.writehead (200 ، {"content-type": "text/html"}) ؛
Response.write ("الصورة المستلمة: <br/>") ؛
Response.write ("<img src = ' /show' />") ؛
استجابة.
}) ؛
}
وظيفة عرض (استجابة) {
console.log ("تم استدعاء" معالج الطلب "" عرض ".") ؛
fs.readfile ("/tmp/test.png" ، "ثنائي" ، وظيفة (خطأ ، ملف) {
إذا (خطأ) {
Response.writehead (500 ، {"content-type": "text/plain"}) ؛
استجابة. write (خطأ + "/n") ؛
استجابة.
} آخر {
Response.writehead (200 ، {"content-type": "Image/PNG"}) ؛
Response.write (ملف ، "ثنائي") ؛
استجابة.
}
}) ؛
}
orports.start = start ؛
orports.upload = تحميل ؛
exports.show = show ؛
من خلال القيام بذلك ، يتم الانتهاء من خوادمنا.
أثناء عملية تحميل الصور ، قد يواجه بعض الأشخاص مثل هذه المشكلات:
أعتقد أن سبب هذه المشكلة ناتج عن تقسيم القرص. لحل هذه المشكلة ، تحتاج إلى تغيير مسار المجلد الافتراضي للوقت الصفر من هائل لضمان وجوده في نفس قسم القرص مثل الدليل المستهدف.
لقد وجدنا وظيفة التحميل لـ requestHandlers.js وقامنا ببعض التعديلات عليها:
نسخة الكود كما يلي:
تحميل الوظيفة (استجابة ، طلب) {
console.log ("تم استدعاء معالج الطلب" تحميل ".") ؛
var form = new MOPIDIDABLE.INCOMINGFORM () ؛
console.log ("على وشك التحليل") ؛
form.uploaddir = "tmp" ؛
form.parse (طلب ، وظيفة (خطأ ، الحقول ، الملفات) {
console.log ("التحليل المنجز") ؛
fs.renamesync (files.upload.path ، "/tmp/test.png") ؛
Response.writehead (200 ، {"content-type": "text/html"}) ؛
Response.write ("الصورة المستلمة: <br/>") ؛
Response.write ("<img src = ' /show' />") ؛
استجابة.
}) ؛
}
أضفنا نموذج الجملة. uploaddir = "TMP". أعد تشغيل الخادم الآن ثم قم بتنفيذ عملية التحميل. تم حل المشكلة تمامًا.