1
00:00:00,000 --> 00:00:04,223
[MUSIC]

2
00:00:04,223 --> 00:00:09,176
تعد تحميلات الملفات ميزة شائعة تدعمها العديد من الخوادم.

3
00:00:09,176 --> 00:00:13,642
لذلك، عند ملء نموذج على سبيل المثال، قد يكون لديك حقل هناك

4
00:00:13,642 --> 00:00:18,600
حيث تقوم بملء اسم ملف ثم تحميل هذا الملف إلى جانب الخادم.

5
00:00:18,600 --> 00:00:19,545
على سبيل المثال،

6
00:00:19,545 --> 00:00:23,890
لنفترض أنك تقوم بتحميل المعلومات حول طبق إلى جانب الخادم.

7
00:00:23,890 --> 00:00:28,300
ثم سوف ترغب أيضا في تحميل الصورة المقابلة للطبق

8
00:00:28,300 --> 00:00:29,510
إلى جانب الخادم.

9
00:00:29,510 --> 00:00:34,915
لذلك في هذه العملية، ستقوم أولاً بتحميل صورة الطبق إلى جانب الخادم،

10
00:00:34,915 --> 00:00:36,770
والحصول على عنوان URL

11
00:00:36,770 --> 00:00:41,170
لتلك الصورة من جانب الخادم أينما تم تحميلها وتخزينها،

12
00:00:41,170 --> 00:00:47,380
ثم استخدم هذه الصورة في مستند JSON الذي يصف الطبق بالتفصيل.

13
00:00:47,380 --> 00:00:53,050
بحيث

14
00:00:53,050 --> 00:00:59,790
في وقت لاحق، عندما يسترد العملاء مستند JSON الذي يصف الطبق من أجل تقديم واجهة المستخدم، ثم، من داخل مستند JSON، سيكونون

15
00:00:59,790 --> 00:01:04,310
قادرين على الحصول على عنوان URL لصورة الطبق التي تم تحميلها إلى جانب الخادم.

16
00:01:04,310 --> 00:01:07,510
ثم استخدمه في بناء واجهة المستخدم.

17
00:01:07,510 --> 00:01:12,500
لذلك في الأمثلة التي رأيناها حتى الآن، عندما نظرنا إلى تفاصيل

18
00:01:12,500 --> 00:01:16,880
طبق، رأينا أن هناك صورة مليئة هناك، وهي سلسلة،

19
00:01:16,880 --> 00:01:24,540
وهي ليست سوى عنوان URL لتلك الصورة المقابلة لذلك الطبق المحدد.

20
00:01:24,540 --> 00:01:32,300
أو العرض الترويجي أو القارئ كما قمنا ببنائه في خادم REST API الخاص بنا.

21
00:01:32,300 --> 00:01:37,210
الآن في هذه المحاضرة، سنتعرف على المزيد حول تحميل الملفات.

22
00:01:37,210 --> 00:01:39,802
كيف يتم دعمه في الخادم؟

23
00:01:39,802 --> 00:01:43,940
ثم كيف يمكننا الاستفادة من وحدة العقدة

24
00:01:43,940 --> 00:01:48,590
التي تمكننا من دعم تحميل الملفات.

25
00:01:50,260 --> 00:01:53,630
يتم دعم تحميلات الملفات عادةً من خلال إدخال نموذج.

26
00:01:53,630 --> 00:01:58,530
لذا في الإدخال، إذا قمت بتحديد النوع كملف

27
00:01:58,530 --> 00:02:03,800
واسم كاسم للحقل هناك،

28
00:02:03,800 --> 00:02:09,210
فستتمكن من توفير الملف الذي سيتم تحميله

29
00:02:09,210 --> 00:02:14,400
عند النقر على زر الإرسال هذا لهذا النموذج المعين هنا.

30
00:02:14,400 --> 00:02:20,234
الآن، عندما يتم تحميل معلومات الملف إلى جانب الخادم،

31
00:02:20,234 --> 00:02:24,714
يتم ترميز بيانات النموذج نفسه عادة إما

32
00:02:24,714 --> 00:02:31,200
تطبيق/x-www-form-urlencoded أو multipart/form-data.

33
00:02:31,200 --> 00:02:35,900
لذلك تقوم بتصميم النموذج الخاص بك، على سبيل المثال، ستقوم بتصميم النموذج الخاص بك مع

34
00:02:35,900 --> 00:02:40,450
تعيين الإجراء إلى/imageUpload في REST API انحدر،

35
00:02:40,450 --> 00:02:48,760
والذي سيكون بمثابة نقطة النهاية التي تقوم فيها بنشر الصورة.

36
00:02:48,760 --> 00:02:53,870
بحيث تكون الطريقة المقابلة هي النشر، ونوع الترميز،

37
00:02:53,870 --> 00:02:58,140
يمكنك تعيينه إلى بيانات متعددة الأجزاء/النموذج داخل النموذج الخاص بك.

38
00:02:58,140 --> 00:03:02,797
لذلك هذا يعني أنه سيتم ترميز عناصر النموذج في نوع الترميز،

39
00:03:02,797 --> 00:03:05,920
ثم تحميلها إلى جانب الخادم.

40
00:03:05,920 --> 00:03:11,228
تحميل الملف هو أكثر كفاءة مع متعدد الأجزاء/نموذج البيانات.

41
00:03:11,228 --> 00:03:16,130
وبالتالي، هذا هو النهج المفضل الذي نستخدمه لتحميل الملفات.

42
00:03:17,560 --> 00:03:22,945
الآن، إذا كنت تريد معرفة المزيد من التفاصيل حول تحميل الملف

43
00:03:22,945 --> 00:03:28,843
وتحميل النموذج وتطبيق التطبيق/x-www-form-urlencoded أو

44
00:03:28,843 --> 00:03:33,848
بيانات multipart/form-multipart/form-data، فيمكنك قراءة HTML5

45
00:03:33,848 --> 00:03:37,410
(توصية W3C) حيث يتم إعطاء التفاصيل،

46
00:03:37,410 --> 00:03:42,270
وكذلك طلب IETF المقابل للتعليق الوثائق.

47
00:03:42,270 --> 00:03:47,190
لدي روابط إلى هذه في الموارد الإضافية في حال كنت ترغب في قراءة المزيد

48
00:03:47,190 --> 00:03:54,070
عن التفاصيل الفعلية لكيفية دعم أنواع ترميز النماذج هذه.

49
00:03:55,090 --> 00:04:00,110
من منظورنا، عندما نستخدم بيانات متعددة الأجزاء/النموذج،

50
00:04:00,110 --> 00:04:04,850
عندما يتم تضمينها في

51
00:04:04,850 --> 00:04:10,040
رسالة طلب HTTP التي تسير إلى جانب الخادم، ثم في رأس رسالة الطلب،

52
00:04:10,040 --> 00:04:15,320
سيكون لديك نوع محتوى معين إلى بيانات متعددة الأجزاء/النموذج.

53
00:04:15,320 --> 00:04:19,410
ثم أيضا قيمة الحدود التي تم إعدادها من هذا القبيل.

54
00:04:19,410 --> 00:04:23,305
تفصل الحدود بين الأجزاء المتعددة من نص الطلب.

55
00:04:23,305 --> 00:04:28,215
لذلك سيتم تقسيم نص الطلب نفسه لرسالة الطلب الصادرة

56
00:04:28,215 --> 00:04:29,475
إلى أجزاء متعددة.

57
00:04:29,475 --> 00:04:33,375
وسيتم تحديد كل جزء من الجزء السابق

58
00:04:33,375 --> 00:04:36,582
باستخدام هذه الحدود هنا.

59
00:04:36,582 --> 00:04:40,912
الآن، من أجل توضيح التفاصيل لك، لقد قمت بتزوير

60
00:04:40,912 --> 00:04:45,292
الخادم لطباعة هذه المعلومات من رسالة الطلب الواردة.

61
00:04:45,292 --> 00:04:49,202
حتى نتمكن من دراسة هذا بمزيد من التفصيل.

62
00:04:49,202 --> 00:04:52,092
إلقاء نظرة على التفاصيل

63
00:04:52,092 --> 00:04:57,850
لرسالة محددة أرسلتها من ساعي البريد إلى جانب الخادم،

64
00:04:57,850 --> 00:05:03,250
يمكنك ملاحظة أنه هنا، لقد طبعت رؤوس الطلبات هنا.

65
00:05:03,250 --> 00:05:08,530
وعلى وجه الخصوص، في رأس الطلب، اسمحوا لي أن ألفت انتباهكم إلى هذا العنوان

66
00:05:08,530 --> 00:05:13,500
هنا، ودعا نوع المحتوى، الذي تم تعيينه إلى بيانات متعددة الأجزاء/النموذج.

67
00:05:13,500 --> 00:05:17,720
ثم لاحظ على وجه الخصوص الحدود المحددة هنا

68
00:05:17,720 --> 00:05:20,660
مع هذا العدد الطويل هنا.

69
00:05:20,660 --> 00:05:23,500
لذلك هذا هو رأس الطلب

70
00:05:23,500 --> 00:05:28,400
لرسالة الطلب الواردة التي قمت بنشرها باستخدام طريقة النشر.

71
00:05:28,400 --> 00:05:32,750
في الواقع، هذه هي بالضبط رسالة الطلب التي سأستخدمها

72
00:05:32,750 --> 00:05:37,710
في التمرين الذي يتبع هذه المحاضرة من أجل تحميل الملف.

73
00:05:37,710 --> 00:05:42,110
لذلك عندما نقوم بتحميل هذا الملف هناك، كل الحق، ستلاحظ أنه

74
00:05:42,110 --> 00:05:46,920
في نص الطلب، لذلك هذا هو المكان الذي أطبع فيه نص الطلب أسفل هنا.

75
00:05:46,920 --> 00:05:49,010
وفي هيئة الطلب،

76
00:05:49,010 --> 00:05:54,460
ستلاحظ أنه يطبع هذا الخط بالذات هنا.

77
00:05:54,460 --> 00:05:58,040
وهذا يتوافق مع الحدود المحددة هنا.

78
00:05:58,040 --> 00:06:04,717
لذلك تحدد هذه الحدود بشكل أساسي الفصل بين الأجزاء المختلفة من

79
00:06:04,717 --> 00:06:10,070
الجسم متعدد الأجزاء الذي هو جزء من رسالة الطلب هذه.

80
00:06:10,070 --> 00:06:13,330
لذلك في نص الطلب، سترى هذا يتم تعريفه هنا.

81
00:06:13,330 --> 00:06:18,810
بالإضافة إلى ذلك، ستحدد أيضًا نفس ترتيب المحتوى مثل بيانات النموذج،

82
00:06:18,810 --> 00:06:22,361
مما يعني أنها ستفسر هذا كبيانات نموذج

83
00:06:22,361 --> 00:06:24,920
والاسم المقابل لـ ImageFile.

84
00:06:26,120 --> 00:06:30,569
واسم الملف نفسه من جانب العميل الذي تم تحميله،

85
00:06:30,569 --> 00:06:33,220
يتم إعطاء اسم الملف نفسه هنا.

86
00:06:33,220 --> 00:06:38,180
ثم أسفل أدناه يقول نوع المحتوى: صورة/بابوا نيو غينيا.

87
00:06:38,180 --> 00:06:41,620
لذلك أنا تحميل ملف صورة ينغ هذا هنا.

88
00:06:41,620 --> 00:06:44,220
إذن هذه هي التفاصيل الموصوفة هنا.

89
00:06:44,220 --> 00:06:48,870
وبينما تقوم بالتمرير لأسفل إلى نص الطلب نفسه،

90
00:06:48,870 --> 00:06:53,480
سترى تفاصيل ما يتم تضمينه في نص الطلب.

91
00:06:53,480 --> 00:07:00,680
لذلك هذا داخل ملف PNG هنا، سترى هذه المعلومات في ملف PNG.

92
00:07:00,680 --> 00:07:03,970
حتى إذا قمت بفتح ملف PNG، وهذا هو ما سترى هنا.

93
00:07:03,970 --> 00:07:07,200
لذلك هذا يحتوي على مجموعة كاملة من الأحرف هنا،

94
00:07:07,200 --> 00:07:09,960
والتي من الواضح أن على الشاشة لا يمكن طباعتها.

95
00:07:09,960 --> 00:07:14,980
لذا أثناء التمرير لأسفل، ستقوم بهذه المجموعة الكاملة من المعلومات،

96
00:07:16,960 --> 00:07:21,730
والتي هي في الواقع ما هو موجود في نص الطلب الخاص

97
00:07:21,730 --> 00:07:26,310
برسالة الطلب التي تقوم بتحميل هذا الملف المعين إلى جانب الخادم.

98
00:07:26,310 --> 00:07:30,720
لذلك ترون أن هذا الجسم يحتوي في الواقع على النسخة المشفرة

99
00:07:30,720 --> 00:07:33,640
من الصورة هناك.

100
00:07:33,640 --> 00:07:39,650
وهذه هي نهاية الحدود لهيئة الطلب تلك.

101
00:07:39,650 --> 00:07:44,960
لذلك في رسالة طلبنا، لدينا ملف واحد فقط المضمنة هنا.

102
00:07:44,960 --> 00:07:48,230
يمكنك أيضًا تحميل ملفات متعددة إذا كنت لا تزال ترغب في ذلك.

103
00:07:48,230 --> 00:07:53,140
ولكن بعد ذلك، تحتاج إلى تكوين وحدة npm بشكل مناسب

104
00:07:53,140 --> 00:07:55,490
لقبول ملفات متعددة.

105
00:07:55,490 --> 00:08:02,780
لذا، هذه هي الطريقة التي يحتوي بها نص الطلب نفسه على الإصدار المشفر

106
00:08:02,780 --> 00:08:08,045
للصورة، والذي سيقوم الخادم باستخراج الصورة

107
00:08:08,045 --> 00:08:12,515
منه، ثم حفظه في الملف بنفس اسم الملف على جانب الخادم.

108
00:08:12,515 --> 00:08:17,245
لذا هذه هي الطريقة التي سنقوم بها بتكوين تطبيقنا، التطبيق من جانب الخادم،

109
00:08:17,245 --> 00:08:21,095
للقيام به في التمرين الذي يتبع هذه المحاضرة.

110
00:08:21,095 --> 00:08:23,990
لذلك اعتقدت أنها ستكون

111
00:08:23,990 --> 00:08:28,500
خطوة مثيرة للاهتمام لتوضيح لك بالضبط ما يتلقى الخادم الخاص بي.

112
00:08:28,500 --> 00:08:33,090
وهكذا هذا سوف اقول لماذا نحن نحدد هذه الحدود هنا.

113
00:08:33,090 --> 00:08:35,230
وكيف، داخل هيئة الطلب نفسها،

114
00:08:35,230 --> 00:08:41,163
نستخدم الحدود لتعيين الأجزاء المختلفة من هيئة الطلب.

115
00:08:41,163 --> 00:08:43,895
لذا فإن جانب الخادم، عند معالجته،

116
00:08:43,895 --> 00:08:49,645
سيكون قادرًا على استخراج بيانات الصورة من نص الطلب بشكل مناسب،

117
00:08:49,645 --> 00:08:52,660
ثم حفظ ملف الصورة على جانب الخادم.

118
00:08:53,890 --> 00:08:59,030
لذلك تماما كما أوضحت في المحطة

119
00:08:59,030 --> 00:09:03,320
هناك أن الحدود تفصل جزء طلب مولتيباس.

120
00:09:03,320 --> 00:09:06,538
وهكذا رأيت الحدود المحددة هناك.

121
00:09:06,538 --> 00:09:12,843
من أجل العمل مع بيانات النموذج متعدد الأجزاء الواردة في نص الطلب،

122
00:09:12,843 --> 00:09:17,768
سنقوم باستخدام وحدة NPR التي تدعم معالجة

123
00:09:17,768 --> 00:09:22,610
بيانات النموذج متعدد الأجزاء المضمنة داخل نص الطلب.

124
00:09:22,610 --> 00:09:25,290
سيقوم تلقائيًا باستخراج كل شيء لك،

125
00:09:25,290 --> 00:09:31,218
ثم تحميله على كائنين على كائن الطلب على جانب الخادم.

126
00:09:31,218 --> 00:09:36,840
لذا فإن وحدة npm هذه تسمى Multer، والتي عند تثبيتها

127
00:09:36,840 --> 00:09:41,280
على التطبيق من جانب الخادم

128
00:09:41,280 --> 00:09:44,910
وتكوين الخادم السريع الخاص بك لاستخدام Multer.

129
00:09:44,910 --> 00:09:49,370
ثم ستتمكن من معالجة رسالة الطلب الواردة التي

130
00:09:49,370 --> 00:09:52,560
تحتوي على بيانات متعددة الأجزاء/النموذج في رسالة الطلب.

131
00:09:52,560 --> 00:09:56,190
لذلك مولتر هو وحدة العقدة حيث من شأنها أن

132
00:09:56,190 --> 00:09:59,930
تساعد الخادم على التعامل مع متعدد الأجزاء/نموذج البيانات.

133
00:09:59,930 --> 00:10:04,330
هذا مكتوب على رأس وحدة npm أخرى تسمى النادل.

134
00:10:04,330 --> 00:10:11,480
Busboy هي الوحدة النمطية التي تعالج بيانات نموذج HTML الواردة، بيانات نموذج HTML العامة.

135
00:10:11,480 --> 00:10:16,350
وبشكل خاص، يجلب مولتر على نادل لتمكينك من

136
00:10:16,350 --> 00:10:20,330
معالجة بيانات متعددة الأجزاء/النموذج على جانب الخادم الخاص بك.

137
00:10:20,330 --> 00:10:24,040
الآن عندما يوزع هذه المعلومات، سيقوم مولتر

138
00:10:24,040 --> 00:10:29,280
بتحميل بيانات النموذج الواردة ويضيف كائن الجسم إلى req.

139
00:10:29,280 --> 00:10:34,070
لذلك سيكون لديك كائن req.body وأيضا كائن req.file.

140
00:10:34,070 --> 00:10:38,861
إذا قمت بتحميل ملف واحد، فسيستمر في req.file الكائن.

141
00:10:38,861 --> 00:10:44,042
ثم إذا قمت بإعداد Multer الخاص بك لقبول تحميلات ملفات متعددة،

142
00:10:44,042 --> 00:10:47,590
فيمكنك إعداد كائن req.files.

143
00:10:47,590 --> 00:10:51,480
سيكون كائن الملفات صفيفًا يحتوي على كافة المعلومات

144
00:10:51,480 --> 00:10:54,878
لكل ملف معين يتم تحميله على جانب الخادم.

145
00:10:54,878 --> 00:11:00,565
يحتوي كائن الملف نفسه على معلومات تلخص

146
00:11:00,565 --> 00:11:05,714
طريقة حفظ الملف على جانب الخادم بواسطة Multer.

147
00:11:05,714 --> 00:11:09,219
مع هذا الفهم السريع لكيفية عمل تحميل الملفات،

148
00:11:09,219 --> 00:11:14,340
دعونا ننتقل إلى التمرين حيث سنقوم بالفعل بتكوين وحدة مولتر.

149
00:11:14,340 --> 00:11:19,113
ثم استخدمه داخل تطبيقنا السريع للتعامل مع تحميلات الملفات

150
00:11:19,113 --> 00:11:20,685
من جانب العميل.

151
00:11:20,685 --> 00:11:26,869
[ موسيقى]