[MUSIC]
تعد تحميلات الملفات ميزة شائعة تدعمها العديد من الخوادم.
لذلك، عند ملء نموذج على سبيل المثال، قد يكون لديك حقل هناك
حيث تقوم بملء اسم ملف ثم تحميل هذا الملف إلى جانب الخادم.
على سبيل المثال،
لنفترض أنك تقوم بتحميل المعلومات حول طبق إلى جانب الخادم.
ثم سوف ترغب أيضا في تحميل الصورة المقابلة للطبق
إلى جانب الخادم.
لذلك في هذه العملية، ستقوم أولاً بتحميل صورة الطبق إلى جانب الخادم،
والحصول على عنوان URL
لتلك الصورة من جانب الخادم أينما تم تحميلها وتخزينها،
ثم استخدم هذه الصورة في مستند JSON الذي يصف الطبق بالتفصيل.
بحيث
في وقت لاحق، عندما يسترد العملاء مستند JSON الذي يصف الطبق من أجل تقديم واجهة المستخدم، ثم، من داخل مستند JSON، سيكونون
قادرين على الحصول على عنوان URL لصورة الطبق التي تم تحميلها إلى جانب الخادم.
ثم استخدمه في بناء واجهة المستخدم.
لذلك في الأمثلة التي رأيناها حتى الآن، عندما نظرنا إلى تفاصيل
طبق، رأينا أن هناك صورة مليئة هناك، وهي سلسلة،
وهي ليست سوى عنوان URL لتلك الصورة المقابلة لذلك الطبق المحدد.
أو العرض الترويجي أو القارئ كما قمنا ببنائه في خادم REST API الخاص بنا.
الآن في هذه المحاضرة، سنتعرف على المزيد حول تحميل الملفات.
كيف يتم دعمه في الخادم؟
ثم كيف يمكننا الاستفادة من وحدة العقدة
التي تمكننا من دعم تحميل الملفات.
يتم دعم تحميلات الملفات عادةً من خلال إدخال نموذج.
لذا في الإدخال، إذا قمت بتحديد النوع كملف
واسم كاسم للحقل هناك،
فستتمكن من توفير الملف الذي سيتم تحميله
عند النقر على زر الإرسال هذا لهذا النموذج المعين هنا.
الآن، عندما يتم تحميل معلومات الملف إلى جانب الخادم،
يتم ترميز بيانات النموذج نفسه عادة إما
تطبيق/x-www-form-urlencoded أو multipart/form-data.
لذلك تقوم بتصميم النموذج الخاص بك، على سبيل المثال، ستقوم بتصميم النموذج الخاص بك مع
تعيين الإجراء إلى/imageUpload في REST API انحدر،
والذي سيكون بمثابة نقطة النهاية التي تقوم فيها بنشر الصورة.
بحيث تكون الطريقة المقابلة هي النشر، ونوع الترميز،
يمكنك تعيينه إلى بيانات متعددة الأجزاء/النموذج داخل النموذج الخاص بك.
لذلك هذا يعني أنه سيتم ترميز عناصر النموذج في نوع الترميز،
ثم تحميلها إلى جانب الخادم.
تحميل الملف هو أكثر كفاءة مع متعدد الأجزاء/نموذج البيانات.
وبالتالي، هذا هو النهج المفضل الذي نستخدمه لتحميل الملفات.
الآن، إذا كنت تريد معرفة المزيد من التفاصيل حول تحميل الملف
وتحميل النموذج وتطبيق التطبيق/x-www-form-urlencoded أو
بيانات multipart/form-multipart/form-data، فيمكنك قراءة HTML5
(توصية W3C) حيث يتم إعطاء التفاصيل،
وكذلك طلب IETF المقابل للتعليق الوثائق.
لدي روابط إلى هذه في الموارد الإضافية في حال كنت ترغب في قراءة المزيد
عن التفاصيل الفعلية لكيفية دعم أنواع ترميز النماذج هذه.
من منظورنا، عندما نستخدم بيانات متعددة الأجزاء/النموذج،
عندما يتم تضمينها في
رسالة طلب HTTP التي تسير إلى جانب الخادم، ثم في رأس رسالة الطلب،
سيكون لديك نوع محتوى معين إلى بيانات متعددة الأجزاء/النموذج.
ثم أيضا قيمة الحدود التي تم إعدادها من هذا القبيل.
تفصل الحدود بين الأجزاء المتعددة من نص الطلب.
لذلك سيتم تقسيم نص الطلب نفسه لرسالة الطلب الصادرة
إلى أجزاء متعددة.
وسيتم تحديد كل جزء من الجزء السابق
باستخدام هذه الحدود هنا.
الآن، من أجل توضيح التفاصيل لك، لقد قمت بتزوير
الخادم لطباعة هذه المعلومات من رسالة الطلب الواردة.
حتى نتمكن من دراسة هذا بمزيد من التفصيل.
إلقاء نظرة على التفاصيل
لرسالة محددة أرسلتها من ساعي البريد إلى جانب الخادم،
يمكنك ملاحظة أنه هنا، لقد طبعت رؤوس الطلبات هنا.
وعلى وجه الخصوص، في رأس الطلب، اسمحوا لي أن ألفت انتباهكم إلى هذا العنوان
هنا، ودعا نوع المحتوى، الذي تم تعيينه إلى بيانات متعددة الأجزاء/النموذج.
ثم لاحظ على وجه الخصوص الحدود المحددة هنا
مع هذا العدد الطويل هنا.
لذلك هذا هو رأس الطلب
لرسالة الطلب الواردة التي قمت بنشرها باستخدام طريقة النشر.
في الواقع، هذه هي بالضبط رسالة الطلب التي سأستخدمها
في التمرين الذي يتبع هذه المحاضرة من أجل تحميل الملف.
لذلك عندما نقوم بتحميل هذا الملف هناك، كل الحق، ستلاحظ أنه
في نص الطلب، لذلك هذا هو المكان الذي أطبع فيه نص الطلب أسفل هنا.
وفي هيئة الطلب،
ستلاحظ أنه يطبع هذا الخط بالذات هنا.
وهذا يتوافق مع الحدود المحددة هنا.
لذلك تحدد هذه الحدود بشكل أساسي الفصل بين الأجزاء المختلفة من
الجسم متعدد الأجزاء الذي هو جزء من رسالة الطلب هذه.
لذلك في نص الطلب، سترى هذا يتم تعريفه هنا.
بالإضافة إلى ذلك، ستحدد أيضًا نفس ترتيب المحتوى مثل بيانات النموذج،
مما يعني أنها ستفسر هذا كبيانات نموذج
والاسم المقابل لـ ImageFile.
واسم الملف نفسه من جانب العميل الذي تم تحميله،
يتم إعطاء اسم الملف نفسه هنا.
ثم أسفل أدناه يقول نوع المحتوى: صورة/بابوا نيو غينيا.
لذلك أنا تحميل ملف صورة ينغ هذا هنا.
إذن هذه هي التفاصيل الموصوفة هنا.
وبينما تقوم بالتمرير لأسفل إلى نص الطلب نفسه،
سترى تفاصيل ما يتم تضمينه في نص الطلب.
لذلك هذا داخل ملف PNG هنا، سترى هذه المعلومات في ملف PNG.
حتى إذا قمت بفتح ملف PNG، وهذا هو ما سترى هنا.
لذلك هذا يحتوي على مجموعة كاملة من الأحرف هنا،
والتي من الواضح أن على الشاشة لا يمكن طباعتها.
لذا أثناء التمرير لأسفل، ستقوم بهذه المجموعة الكاملة من المعلومات،
والتي هي في الواقع ما هو موجود في نص الطلب الخاص
برسالة الطلب التي تقوم بتحميل هذا الملف المعين إلى جانب الخادم.
لذلك ترون أن هذا الجسم يحتوي في الواقع على النسخة المشفرة
من الصورة هناك.
وهذه هي نهاية الحدود لهيئة الطلب تلك.
لذلك في رسالة طلبنا، لدينا ملف واحد فقط المضمنة هنا.
يمكنك أيضًا تحميل ملفات متعددة إذا كنت لا تزال ترغب في ذلك.
ولكن بعد ذلك، تحتاج إلى تكوين وحدة npm بشكل مناسب
لقبول ملفات متعددة.
لذا، هذه هي الطريقة التي يحتوي بها نص الطلب نفسه على الإصدار المشفر
للصورة، والذي سيقوم الخادم باستخراج الصورة
منه، ثم حفظه في الملف بنفس اسم الملف على جانب الخادم.
لذا هذه هي الطريقة التي سنقوم بها بتكوين تطبيقنا، التطبيق من جانب الخادم،
للقيام به في التمرين الذي يتبع هذه المحاضرة.
لذلك اعتقدت أنها ستكون
خطوة مثيرة للاهتمام لتوضيح لك بالضبط ما يتلقى الخادم الخاص بي.
وهكذا هذا سوف اقول لماذا نحن نحدد هذه الحدود هنا.
وكيف، داخل هيئة الطلب نفسها،
نستخدم الحدود لتعيين الأجزاء المختلفة من هيئة الطلب.
لذا فإن جانب الخادم، عند معالجته،
سيكون قادرًا على استخراج بيانات الصورة من نص الطلب بشكل مناسب،
ثم حفظ ملف الصورة على جانب الخادم.
لذلك تماما كما أوضحت في المحطة
هناك أن الحدود تفصل جزء طلب مولتيباس.
وهكذا رأيت الحدود المحددة هناك.
من أجل العمل مع بيانات النموذج متعدد الأجزاء الواردة في نص الطلب،
سنقوم باستخدام وحدة NPR التي تدعم معالجة
بيانات النموذج متعدد الأجزاء المضمنة داخل نص الطلب.
سيقوم تلقائيًا باستخراج كل شيء لك،
ثم تحميله على كائنين على كائن الطلب على جانب الخادم.
لذا فإن وحدة npm هذه تسمى Multer، والتي عند تثبيتها
على التطبيق من جانب الخادم
وتكوين الخادم السريع الخاص بك لاستخدام Multer.
ثم ستتمكن من معالجة رسالة الطلب الواردة التي
تحتوي على بيانات متعددة الأجزاء/النموذج في رسالة الطلب.
لذلك مولتر هو وحدة العقدة حيث من شأنها أن
تساعد الخادم على التعامل مع متعدد الأجزاء/نموذج البيانات.
هذا مكتوب على رأس وحدة npm أخرى تسمى النادل.
Busboy هي الوحدة النمطية التي تعالج بيانات نموذج HTML الواردة، بيانات نموذج HTML العامة.
وبشكل خاص، يجلب مولتر على نادل لتمكينك من
معالجة بيانات متعددة الأجزاء/النموذج على جانب الخادم الخاص بك.
الآن عندما يوزع هذه المعلومات، سيقوم مولتر
بتحميل بيانات النموذج الواردة ويضيف كائن الجسم إلى req.
لذلك سيكون لديك كائن req.body وأيضا كائن req.file.
إذا قمت بتحميل ملف واحد، فسيستمر في req.file الكائن.
ثم إذا قمت بإعداد Multer الخاص بك لقبول تحميلات ملفات متعددة،
فيمكنك إعداد كائن req.files.
سيكون كائن الملفات صفيفًا يحتوي على كافة المعلومات
لكل ملف معين يتم تحميله على جانب الخادم.
يحتوي كائن الملف نفسه على معلومات تلخص
طريقة حفظ الملف على جانب الخادم بواسطة Multer.
مع هذا الفهم السريع لكيفية عمل تحميل الملفات،
دعونا ننتقل إلى التمرين حيث سنقوم بالفعل بتكوين وحدة مولتر.
ثم استخدمه داخل تطبيقنا السريع للتعامل مع تحميلات الملفات
من جانب العميل.
[ موسيقى]