1
00:00:03,680 --> 00:00:05,985
في الدرس السابق،

2
00:00:05,985 --> 00:00:08,880
تعلمنا كيف يتم

3
00:00:08,880 --> 00:00:12,445
دعم تحميل الملفات من خلال نهج البيانات متعدد الأنظمة الأساسية.

4
00:00:12,445 --> 00:00:16,320
في هذا التمرين، سنستخدم وحدة Multer،

5
00:00:16,320 --> 00:00:21,885
التي أشرنا إليها في المحاضرة لتمكين الخادم السريع لدينا

6
00:00:21,885 --> 00:00:27,820
من دعم تحميل ملفات الصور إلى موقع الخادم الخاص بنا.

7
00:00:27,820 --> 00:00:33,920
سيقومون بتخزين ملفات الصور هذه في مجلد العام/الصور.

8
00:00:33,920 --> 00:00:40,370
ستكون هذه الصور مفيدة في تطبيقنا عندما نقوم بتوفير

9
00:00:40,370 --> 00:00:46,690
صور للأطباق المختلفة أو الرادارات أو العروض الترويجية،

10
00:00:46,690 --> 00:00:51,490
التي قمنا ببنائها في خادم REST API الخاص بنا.

11
00:00:51,490 --> 00:00:54,495
للبدء في هذا التمرين،

12
00:00:54,495 --> 00:00:55,770
فإن الخطوة الأولى بالطبع،

13
00:00:55,770 --> 00:01:01,445
هي تثبيت وحدة Multer حتى في نوع موجه npm تثبيت

14
00:01:01,445 --> 00:01:10,145
multer ناقص الحفظ وفي الوقت الحالي أستخدم multer 1.3.1 في هذه الدورة.

15
00:01:10,145 --> 00:01:12,785
لذلك بمجرد تثبيت وحدة مولتر،

16
00:01:12,785 --> 00:01:21,695
دعونا نذهب إلى مشروعنا ومن ثم تنفيذ مسار جديد يمكننا من تحميل الملفات.

17
00:01:21,695 --> 00:01:25,920
انتقل إلى المشروع في مجلد المسارات،

18
00:01:25,920 --> 00:01:33,210
دعونا إضافة ملف جديد باسم تحميل router.js.

19
00:01:33,210 --> 00:01:37,260
هذا الموجه، الموجه السريع الذي سنقوم بتنفيذه هنا،

20
00:01:37,260 --> 00:01:43,380
هو الموجه الذي سيدعم تحميل الملفات.

21
00:01:43,380 --> 00:01:46,250
لذلك، في جهاز التوجيه تحميل اسمحوا لي أن مجرد الذهاب إلى

22
00:01:46,250 --> 00:01:50,120
جهاز التوجيه طبق ونسخ هذه الأشياء القليلة الأولى من جهاز التوجيه طبق

23
00:01:50,120 --> 00:01:52,550
لأننا إلى حد كبير الذهاب إلى إعداد

24
00:01:52,550 --> 00:01:57,440
بنية مماثلة في التطبيق لدينا أو جهاز التوجيه تحميل.

25
00:01:57,440 --> 00:02:00,720
لذلك، اسمحوا لي أن نسخ ذلك الجزء وبعد ذلك سوف نقوم بتحرير ذلك.

26
00:02:00,720 --> 00:02:02,800
لذا، في جهاز التوجيه التحميل،

27
00:02:02,800 --> 00:02:09,850
لا أحتاج إلى النمس لذا سأقوم بإزالة النمس ولا أحتاج إلى الأطباق أيضًا.

28
00:02:09,850 --> 00:02:12,755
لذلك، سيتم إزالة هذين الاثنين وبعد ذلك

29
00:02:12,755 --> 00:02:15,935
نحن بحاجة إلى التعبير عن محلل الجسم والمصادقة.

30
00:02:15,935 --> 00:02:25,585
الآن، أنا ذاهب إلى طلب وحدة مولتر هنا.

31
00:02:25,585 --> 00:02:29,280
مرة واحدة ونحن تشمل وحدة مولتر،

32
00:02:29,280 --> 00:02:35,585
والآن هذا جهاز التوجيه أنا ذاهب إلى استدعاء هذا كما جهاز التوجيه تحميل.

33
00:02:35,585 --> 00:02:42,020
لذلك، سوف أقول تحميل جهاز التوجيه استخدام محلل الجسم

34
00:02:42,020 --> 00:02:48,040
ثم هذا واحد ولكن جهاز التوجيه تحميل ومرة أخرى،

35
00:02:48,040 --> 00:02:58,110
تذكر أن أقول تصدير وحدة، تحميل جهاز التوجيه هنا.

36
00:02:58,110 --> 00:03:00,570
لذلك، بالنسبة لمسار أجهزة توجيه التحميل،

37
00:03:00,570 --> 00:03:03,025
نحتاج إلى إضافة طرق مختلفة.

38
00:03:03,025 --> 00:03:07,130
سأفعل ذلك في وقت لاحق قليلا ولكن قبل ذلك دعونا إعداد

39
00:03:07,130 --> 00:03:11,765
مولتر لتمكيننا من تحميل الملفات.

40
00:03:11,765 --> 00:03:19,545
الآن، افتراضيا، مولتر يمكن الإعداد ببساطة عن طريق استخدام مولتر داخل التطبيق لدينا،

41
00:03:19,545 --> 00:03:24,360
ولكن أنا ذاهب للقيام ببعض التكوين من مولتر في

42
00:03:24,360 --> 00:03:28,100
هذا التمرين بحيث أننا ذاهبون

43
00:03:28,100 --> 00:03:32,615
لتخصيص الطريقة مولتر يعالج تحميل الملفات.

44
00:03:32,615 --> 00:03:35,150
لذلك، لاستخدام مولتر،

45
00:03:35,150 --> 00:03:43,455
واحدة من الخيارات التي يأخذ مولتر هو للتخزين.

46
00:03:43,455 --> 00:03:49,295
لذلك، يوفر مولتر وظيفة تخزين القرص هذه التي

47
00:03:49,295 --> 00:03:56,480
تمكننا من تحديد محرك التخزين وهنا يمكننا تكوين بعض الأشياء.

48
00:03:56,480 --> 00:04:00,409
الآن، إذا كانت مجرد مسألة تكوين الوجهة،

49
00:04:00,409 --> 00:04:03,830
يمكنك ببساطة أن تقول dest colon،

50
00:04:03,830 --> 00:04:08,810
ثم تحديد المجلد الوجهة الذي سيتم تخزين الملفات التي تم تحميلها.

51
00:04:08,810 --> 00:04:15,450
ولكن هنا سأقوم ببعض التكوين الإضافي لوحدة مولتر هنا.

52
00:04:15,450 --> 00:04:19,715
لذلك، هذا هو المكان الذي أنا ذاهب لاستخدام دعم تخزين القرص مولتر.

53
00:04:19,715 --> 00:04:22,025
داخل تخزين القرص،

54
00:04:22,025 --> 00:04:27,080
يمكنني تحديد اثنين من الخيارات هنا.

55
00:04:27,080 --> 00:04:32,315
الخيارات التي سأقوم بتحديدها ستكون

56
00:04:32,315 --> 00:04:40,535
الوجهة والثانية هي اسم الملف.

57
00:04:40,535 --> 00:04:45,725
لذلك، اثنين من التكوينات التي أنا ذاهب لتوريد إلى تخزين القرص.

58
00:04:45,725 --> 00:04:48,860
الوجهة كما تتوقع,

59
00:04:48,860 --> 00:04:56,405
يسمح لي لتكوين الوجهة وهذا يأخذ

60
00:04:56,405 --> 00:05:03,450
كتكوين هنا وظيفة هنا.

61
00:05:03,450 --> 00:05:06,980
لذلك، يتم تكوين الوجهة كدالة هنا.

62
00:05:06,980 --> 00:05:14,060
سوف تتلقى هذه الوظيفة الطلب وأيضا كائن يسمى الملف،

63
00:05:14,060 --> 00:05:16,790
والذي يحتوي على معلومات حول الملف الذي

64
00:05:16,790 --> 00:05:21,930
تمت معالجته بواسطة مولتر وأيضا وظيفة رد الاتصال.

65
00:05:21,930 --> 00:05:24,045
لذا، cb هي وظيفة رد الاتصال.

66
00:05:24,045 --> 00:05:27,915
لذا، هنا للوجهة،

67
00:05:27,915 --> 00:05:32,865
سأقول cb null،

68
00:05:32,865 --> 00:05:37,054
المعلمة الثانية هي المجلد الوجهة،

69
00:05:37,054 --> 00:05:41,330
والتي يمكن التعبير عنها كسلسلة حيث سيتم تخزين الملفات.

70
00:05:41,330 --> 00:05:51,025
لذا، هنا، سأقوم بتزويد الوجهة كصور شرطة مائلة عامة.

71
00:05:51,025 --> 00:05:54,980
لأنه في هذا التمرين أنا ذاهب لدعم تحميل الصور.

72
00:05:54,980 --> 00:05:59,865
لذلك، هذا هو الجزء الذي سأقوم بتحديده هنا، لذلك تحميل الصورة.

73
00:05:59,865 --> 00:06:03,800
لذا، تأخذ وظيفة رد الاتصال كما ترى معلمتين.

74
00:06:03,800 --> 00:06:04,820
الأول هو، بطبيعة الحال،

75
00:06:04,820 --> 00:06:07,460
الخطأ الذي في هذه الحالة أنا ذاهب لتعيينه إلى

76
00:06:07,460 --> 00:06:11,335
فارغة والثاني هو مجلد الوجهة،

77
00:06:11,335 --> 00:06:14,110
حيث سيتم تخزين صوري.

78
00:06:14,110 --> 00:06:19,010
لذلك، يمكنني تكوين ذلك عن طريق قول صور شرطة مائلة عامة.

79
00:06:19,010 --> 00:06:20,995
لذلك، في مجلد الصور،

80
00:06:20,995 --> 00:06:24,300
سيتم تخزين الملفات التي أقوم بتحميلها.

81
00:06:24,300 --> 00:06:26,370
بالنسبة لاسم الملف أيضًا،

82
00:06:26,370 --> 00:06:31,320
فإنه يحصل على المعلمات الثلاثة

83
00:06:31,320 --> 00:06:35,985
ورسالة الطلب والملف ووظيفة رد الاتصال.

84
00:06:35,985 --> 00:06:39,345
من تكوين الطريقة التي يتم بها استدعاء وظيفة رد الاتصال،

85
00:06:39,345 --> 00:06:42,140
يمكننا تحديد معلومات حول اسم الملف.

86
00:06:42,140 --> 00:06:47,205
لذلك، بالنسبة لوظيفة رد الاتصال أود أن أقول cb null وليس هناك خطأ هنا.

87
00:06:47,205 --> 00:06:51,860
ثم يصر الثاني على اسم الملف،

88
00:06:51,860 --> 00:06:56,430
الذي سيتم استخدامه للملف المحدد الذي تم تحميله للتو،

89
00:06:56,430 --> 00:06:57,975
وكيف سيتم تخزينه.

90
00:06:57,975 --> 00:07:01,835
لذلك، هذا الكائن الملف الذي حصلت عليه هنا،

91
00:07:01,835 --> 00:07:08,595
ويدعم مجموعة من عدة خصائص على ذلك.

92
00:07:08,595 --> 00:07:11,985
واحدة من الخصائص تسمى، الاسم الأصلي.

93
00:07:11,985 --> 00:07:14,585
لذلك، الاسم الأصلي أساسا،

94
00:07:14,585 --> 00:07:19,475
يعطينا الاسم الأصلي للملف من جانب العميل الذي تم تحميله.

95
00:07:19,475 --> 00:07:23,410
أصر على أنه عند حفظ الملف على جانب الخادم،

96
00:07:23,410 --> 00:07:26,380
سيتم إعطاء الملف نفس الاسم تمامًا

97
00:07:26,380 --> 00:07:29,710
مثل الاسم الأصلي للملف الذي تم تحميله.

98
00:07:29,710 --> 00:07:32,605
حتى أتمكن من معرفة أنني أقوم بتحميل

99
00:07:32,605 --> 00:07:35,140
نفس الملف بالضبط وعلى جانب الخادم عند

100
00:07:35,140 --> 00:07:38,200
تحميل الملف سيتم تخزينه بنفس الاسم.

101
00:07:38,200 --> 00:07:42,000
الآن، إذا لم تقم بتكوين هذا،

102
00:07:42,000 --> 00:07:45,100
فسيعطي multer افتراضيًا بعض السلسلة العشوائية

103
00:07:45,100 --> 00:07:48,130
كاسم الملف بدون ملحقات.

104
00:07:48,130 --> 00:07:51,590
لذلك، قد لا يكون ذلك شيئًا ستكون سعيدًا

105
00:07:51,590 --> 00:07:55,290
باستخدامه في هذا التمرين بالذات.

106
00:07:55,290 --> 00:07:58,940
لذلك، لهذا السبب أنا تكوين صراحة قائلا أنه

107
00:07:58,940 --> 00:08:04,805
يجب تخزين الملف مع الاسم الأصلي للملف الذي تم تحميله.

108
00:08:04,805 --> 00:08:08,300
سنواجه مرة أخرى كائن الملف هذا

109
00:08:08,300 --> 00:08:11,630
بمزيد من التفصيل ونرى كيف

110
00:08:11,630 --> 00:08:15,245
يمكننا الاستفادة من المعلومات من كائن الملف في وقت لاحق قليلا.

111
00:08:15,245 --> 00:08:22,790
بالإضافة إلى ذلك، يمكنني أيضًا تحديد مرشح ملف هنا لتكوين multers.

112
00:08:22,790 --> 00:08:28,145
سيمكنني مرشح الملفات من تحديد نوع الملفات التي

113
00:08:28,145 --> 00:08:33,410
أرغب في تحميلها أو التي أنا على استعداد لقبول تحميلها.

114
00:08:33,410 --> 00:08:37,310
لذلك، للقيام بذلك سوف أقوم بإعداد وظيفة أخرى تسمى

115
00:08:37,310 --> 00:08:42,480
فلتر ملف صورة const

116
00:08:43,360 --> 00:08:48,755
وهذا واحد سوف تحديد وظيفة في دقيقة واحدة.

117
00:08:48,755 --> 00:08:51,530
الآن، لهذا، يمكنني أيضًا حفظ هذا

118
00:08:51,530 --> 00:08:55,580
كتخزين const لأننا كنا نستخدم const لكل شيء،

119
00:08:55,580 --> 00:08:57,650
لذلك، سأقول فقط تخزين const.

120
00:08:57,650 --> 00:08:59,480
بالنسبة إلى مرشح ملف الصورة،

121
00:08:59,480 --> 00:09:01,490
سأقول مرشح ملف صورة const.

122
00:09:01,490 --> 00:09:07,725
مرة أخرى، فإنه يتلقى ثلاثة معلمات طلب

123
00:09:07,725 --> 00:09:11,780
، كائن، كائن الملف الذي يحتوي على معلومات حول

124
00:09:11,780 --> 00:09:15,660
الملف الذي تم تحميله وظيفة رد الاتصال هنا.

125
00:09:15,660 --> 00:09:17,260
من خلال وظيفة رد الاتصال،

126
00:09:17,260 --> 00:09:22,535
وسوف تمرير المعلومات مرة أخرى إلى بلدي التكوين مولتر التي

127
00:09:22,535 --> 00:09:27,800
تمكني من تحديد كيف أنا ذاهب لتخزين هذه المعلومات.

128
00:09:27,800 --> 00:09:30,590
لذا، ستكون هذه وظيفة سهم هنا.

129
00:09:30,590 --> 00:09:35,800
داخل وظيفة السهم هذه ما سأتحقق منه هو أنه،

130
00:09:35,800 --> 00:09:45,405
سأقول إذا لم يكن الملف مطابقة الاسم الأصلي.

131
00:09:45,405 --> 00:09:49,340
لذلك، الاسم الأصلي هو سلسلة هنا.

132
00:09:49,340 --> 00:09:55,780
لذلك، أحاول معرفة ما إذا كان هناك تطابق لتلك السلسلة بالقول،

133
00:09:55,780 --> 00:09:58,260
داخل هنا تعبير عادي.

134
00:09:58,260 --> 00:10:01,570
لذا، فإن التعبير العادي الذي سأحدده كشرطة مائلة،

135
00:10:01,570 --> 00:10:05,505
نقطة مائلة عكسية، ثم

136
00:10:05,505 --> 00:10:09,565
الخيارات التي سأقوم بتحديدها هي jpg

137
00:10:09,565 --> 00:10:15,530
أو jpeg أو

138
00:10:15,530 --> 00:10:22,260
png أو gif.

139
00:10:25,250 --> 00:10:31,575
لذا، هذه هي الطريقة التي أحدد بها التعبير العادي هناك.

140
00:10:31,575 --> 00:10:32,785
لنقول أنه حسنًا،

141
00:10:32,785 --> 00:10:38,515
إذا كان امتداد الملف يحتوي على jpg أو jpeg أو png أو gif،

142
00:10:38,515 --> 00:10:44,630
فسأعامل ذلك كملف صورة وسأكون على استعداد لقبول تلك الملفات.

143
00:10:44,630 --> 00:10:47,225
إذن، هذا ما نقوم بإختباره هنا.

144
00:10:47,225 --> 00:10:49,690
إذا كان هذا هو الحال،

145
00:10:49,690 --> 00:10:54,920
وهذا هو إذا كان امتداد الملف لا يتطابق مع أي من هذه الأشياء، لذلك،

146
00:10:54,920 --> 00:11:02,460
هذا هو السبب في أننا لا نرى ثم نقول، العودة cb.

147
00:11:02,460 --> 00:11:07,890
ثم، لاحظ أن cb المعلمة الأولى ستكون خطأ.

148
00:11:07,890 --> 00:11:12,150
لذلك، سأعود خطأ جديد

149
00:11:12,150 --> 00:11:18,375
يقول أنه يمكنك تحميل ملفات الصور فقط.

150
00:11:18,375 --> 00:11:23,195
لذلك، نحن نصر على أن الملفات الوحيدة التي سوف

151
00:11:23,195 --> 00:11:28,565
يقبلونها هي ملفات الصور والمعلمة الثانية ستكون خاطئة.

152
00:11:28,565 --> 00:11:32,240
نظرًا لأننا نوفر الخطأ كمعلمة أولى،

153
00:11:32,240 --> 00:11:35,460
يتم تعيين المعلمة الثانية إلى false.

154
00:11:36,620 --> 00:11:44,340
خلاف ذلك يقول cb null صحيح.

155
00:11:44,340 --> 00:11:49,840
لذا، مما يعني أن الملف الذي يحاول

156
00:11:49,840 --> 00:11:55,440
تحميله يطابق النمط وهكذا فهو ملف صورة،

157
00:11:55,440 --> 00:11:57,955
ولذا فنحن على استعداد للسماح بتحميله.

158
00:11:57,955 --> 00:12:03,410
اثنين من التكوينات التي نحن ذاهبون لتوريد أن وحدة مولتر.

159
00:12:03,410 --> 00:12:07,475
كيف نقوم بتكوين وحدة مولتر للاستخدام داخل تطبيقنا؟

160
00:12:07,475 --> 00:12:12,489
هذا هو المكان الذي سوف أعلن تحميل كونست

161
00:12:12,489 --> 00:12:19,300
كما مولتر وبعد ذلك أود أن تحدد بين قوسين أن الخيارات هنا.

162
00:12:19,300 --> 00:12:27,790
يمكنني تحديد التخزين كوظيفة التخزين التي قمت بتعريفها هنا للتو.

163
00:12:27,790 --> 00:12:31,645
وظيفة التخزين هذه كمعلمة الأولى،

164
00:12:31,645 --> 00:12:35,625
والمعلمة الثانية هي عامل تصفية ملف.

165
00:12:35,625 --> 00:12:40,335
مرشح الملفات هو طريقة تمكني من تحديد

166
00:12:40,335 --> 00:12:46,760
أي نوع من الملفات التي أنا على استعداد لقبول وبعد ذلك سأقول، تصفية ملف الصورة.

167
00:12:46,760 --> 00:12:48,890
فقط قم بتبديل كلمة التفاف،

168
00:12:48,890 --> 00:12:51,860
بحيث يمكنك رؤية السطر بأكمله هنا.

169
00:12:51,860 --> 00:12:57,045
لذلك، فإنه يقول يمكنك تحميل ملفات الصور فقط ومن ثم للمولتر،

170
00:12:57,045 --> 00:13:01,750
وأنا تكوين مرشح الصورة، وهذا كل شيء.

171
00:13:01,750 --> 00:13:10,435
تم تكوين وحدة multer الخاصة بي الآن لتمكينني من تحميل ملفات الصور هنا.

172
00:13:10,435 --> 00:13:15,115
ثم دعونا الآن المضي قدما وتكوين جهاز التوجيه التحميل.

173
00:13:15,115 --> 00:13:16,670
بالنسبة إلى جهاز توجيه التحميل،

174
00:13:16,670 --> 00:13:20,325
سأسمح فقط باستخدام طريقة المشاركة هنا.

175
00:13:20,325 --> 00:13:21,910
وبالتالي فإن الحصول على، ووضع،

176
00:13:21,910 --> 00:13:30,125
وحذف الطرق لن يسمح على نقطة نهاية جهاز التوجيه التحميل.

177
00:13:30,125 --> 00:13:32,130
لمساعدتي في القيام بذلك،

178
00:13:32,130 --> 00:13:38,270
سأذهب إلى جهاز توجيه الطبق ثم أذكر أنه كان لدينا وضع تكوين هنا بالفعل.

179
00:13:38,270 --> 00:13:42,230
أنا ذاهب لنسخ ذلك ومن ثم تأتي

180
00:13:42,230 --> 00:13:47,730
إلى جهاز التوجيه تحميل وبعد ذلك سوف لصق تلك المعلومات هنا.

181
00:13:47,730 --> 00:13:53,500
سنقول، إذا كانت عملية الحصول على ثم أنا لن

182
00:13:53,500 --> 00:14:02,230
تدعم أن على نقطة النهاية سيكون إيماجيوبلود.

183
00:14:02,580 --> 00:14:05,545
لن يسمح بالحصول

184
00:14:05,545 --> 00:14:13,040
، وبالمثل لن يسمح بوضع،

185
00:14:13,710 --> 00:14:20,000
وكذلك لن يسمح بحذف.

186
00:14:20,640 --> 00:14:31,310
أنا لن تدعم أي من هذه العمليات، لذلك ضع، حذف.

187
00:14:31,310 --> 00:14:33,555
هؤلاء الثلاثة لن يسمح لهم

188
00:14:33,555 --> 00:14:40,030
الطريقة الوحيدة التي سأقوم بدعمها هي طريقة المشاركة.

189
00:14:40,030 --> 00:14:41,920
بالنسبة لطريقة المشاركة،

190
00:14:41,920 --> 00:14:47,950
سنقوم بهذه المصادقة على طول الطريق حتى هذه النقطة.

191
00:14:47,950 --> 00:14:50,560
أنا فقط ذاهب لنسخ ذلك هناك،

192
00:14:50,560 --> 00:14:57,205
أغلق نقطة النهاية هذه وللوظيفة.

193
00:14:57,205 --> 00:14:59,125
عندما يتم نشر ملف،

194
00:14:59,125 --> 00:15:03,035
كيف نتعامل مع هذه المشاركة؟

195
00:15:03,035 --> 00:15:06,320
للتعامل مع المشاركة هنا،

196
00:15:06,320 --> 00:15:09,885
لا أحتاج إلى التالي لهذا.

197
00:15:09,885 --> 00:15:15,485
الآن، بالإضافة إلى مصادقة فيريفيوسر ومصادقة فيريفيادمين،

198
00:15:15,485 --> 00:15:21,280
على نفس السطر سوف تكوين التحميل.

199
00:15:21,280 --> 00:15:27,270
لذلك، أذكر أنني قمت بتكوين التحميل باستخدام مولتر هنا.

200
00:15:27,270 --> 00:15:29,790
لذلك، أنا ذاهب للاستفادة من التحميل الذي

201
00:15:29,790 --> 00:15:34,200
يدعم وظيفة تسمى upload.single.

202
00:15:34,200 --> 00:15:42,400
تأخذ هذه الوظيفة المفردة كمعلمة.

203
00:15:42,400 --> 00:15:49,630
اسم حقل النموذج الذي يحدد هذا الملف،

204
00:15:49,630 --> 00:15:52,300
سترى أنه في فترة قصيرة.

205
00:15:52,300 --> 00:16:01,930
حقل النموذج هذا سأسميه كـ ImageFile هنا.

206
00:16:01,930 --> 00:16:09,455
تحميل واحد يعني أنه سوف يسمح لي لتحميل ملف واحد فقط هنا.

207
00:16:09,455 --> 00:16:15,065
سيحدد هذا الملف المفرد في نموذج التحميل من جانب العميل

208
00:16:15,065 --> 00:16:21,730
في تحميل النموذج متعدد الأجزاء باستخدام هذا الاسم هناك.

209
00:16:21,860 --> 00:16:26,525
عندما يتم الحصول على الملف في التعليمات البرمجية،

210
00:16:26,525 --> 00:16:28,060
إذا وصلت إلى هذه النقطة،

211
00:16:28,060 --> 00:16:32,290
وهذا التحميل سوف تأخذ الرعاية من التعامل مع الأخطاء إذا كان هناك أي،

212
00:16:32,290 --> 00:16:36,585
إذا لم يتم تحميل الملف بشكل صحيح وهلم جرا.

213
00:16:36,585 --> 00:16:38,315
عندما تصل إلى هذه النقطة،

214
00:16:38,315 --> 00:16:40,630
كان سيتم تحميل الملف بنجاح

215
00:16:40,630 --> 00:16:43,510
وبالتالي تحتاج إلى التعامل مع الملف الذي تم تحميله.

216
00:16:43,510 --> 00:16:52,750
عند هذه النقطة، سنقول Res.StatusCode هو

217
00:16:52,750 --> 00:17:02,780
200 ثم Res.Setheader نوع المحتوى،

218
00:17:12,240 --> 00:17:18,920
«تطبيق/json'. ما سأقوم به هنا هو أننا

219
00:17:19,920 --> 00:17:30,060
سوف نمر هذا الكائن req.file من الخادم مرة أخرى إلى العميل.

220
00:17:30,060 --> 00:17:36,570
سيحتوي كائن req.file هذا أيضًا على المسار إلى الملف الموجود هناك ويمكن

221
00:17:36,570 --> 00:17:39,890
استخدام هذا المسار بواسطة العميل لتكوين أي

222
00:17:39,890 --> 00:17:43,735
مكان يحتاج فيه إلى معرفة موقع ملف الصورة هذا.

223
00:17:43,735 --> 00:17:47,355
على سبيل المثال، إذا كنت تحاول تحميل طبق

224
00:17:47,355 --> 00:17:51,060
إلى جانب الخادم وتفاصيل الطبق إلى جانب الخادم،

225
00:17:51,060 --> 00:17:53,700
فقد تقوم بتحميل الصورة إلى الخادم ثم

226
00:17:53,700 --> 00:17:56,230
تحصل على عنوان URL لتلك الصورة ثم ربما تقوم

227
00:17:56,230 --> 00:18:02,315
بتضمين عنوان URL لتلك الصورة في كائن json الذي يصف الطبق.

228
00:18:02,315 --> 00:18:09,675
ثم قم بتحميل مستند json الطبق إلى جانب الخادم.

229
00:18:09,675 --> 00:18:12,805
ثم يتم تمرير req.file مرة أخرى إلى العميل،

230
00:18:12,805 --> 00:18:18,190
req.file كما سترى عند تشغيل هذا الخادم،

231
00:18:18,190 --> 00:18:20,670
يحتوي req.file على الكثير من المعلومات حول

232
00:18:20,670 --> 00:18:23,370
الملف الذي تم تحميله للتو، ولذا

233
00:18:23,370 --> 00:18:29,700
سأفحص ذلك للحصول على معلومات حول الملف الذي قمت بتحميله للتو.

234
00:18:29,910 --> 00:18:38,405
هذه هي الطريقة التي سنقوم بها بتكوين طريقة المشاركة هناك، وهذا هو الأمر.

235
00:18:38,405 --> 00:18:44,330
جهاز توجيه التحميل الخاص بي جاهز لقبول تحميلات الملفات.

236
00:18:44,330 --> 00:18:51,440
الآن، كل ما أحتاج إلى القيام به هو الذهاب إلى app.js ثم تكوين جهاز التوجيه التحميل.

237
00:18:51,440 --> 00:18:53,335
لذلك، الذهاب إلى app.js

238
00:18:53,335 --> 00:18:55,550
لدينا بالفعل كل هذه أجهزة التوجيه.

239
00:18:55,550 --> 00:19:00,350
لذلك، اسمحوا لي فقط نسخ LeaderRouter الخاصة بهم ومن ثم

240
00:19:00,350 --> 00:19:07,475
تكوين هذا كما UploadRouter.

241
00:19:07,475 --> 00:19:14,150
لذلك، هذا هو في ملف UploadRouter هنا.

242
00:19:14,150 --> 00:19:18,965
لذلك، سنقوم بتكوين UploadRouter ثم النزول أدناه هنا،

243
00:19:18,965 --> 00:19:28,010
سنقوم الآن بتكوين نقطة النهاية ImageUpload.

244
00:19:28,010 --> 00:19:32,525
لذا، تسمح لي نقطة النهاية ImageUpload بتحميل الملف.

245
00:19:32,525 --> 00:19:37,880
لذلك، سيكون هذا UploadRouter. هذا كل شيء

246
00:19:37,880 --> 00:19:44,740
تم تكوين طلبي الآن لقبول تحميلات الملفات.

247
00:19:44,740 --> 00:19:51,130
لذلك، دعونا حفظ التغييرات ومن ثم الذهاب ونلقي نظرة على كيفية عمل التطبيق لدينا.

248
00:19:51,130 --> 00:19:53,700
بالعودة إلى المحطة الطرفية،

249
00:19:53,700 --> 00:19:58,310
تأكد الآن من أن لديك خادم MongoDB الخاص بك وتشغيله

250
00:19:58,310 --> 00:20:03,020
في إحدى علامات التبويب الطرفية أو في أحد الأمر Windows.

251
00:20:03,020 --> 00:20:04,640
في النافذة الأخرى،

252
00:20:04,640 --> 00:20:09,210
لنبدأ تشغيل الخادم.

253
00:20:09,210 --> 00:20:12,455
بمجرد تشغيل الخادم لدينا،

254
00:20:12,455 --> 00:20:20,120
سنذهب إلى ساعي البريد ثم إرسال أو بالأحرى تحميل ملف من ساعي البريد.

255
00:20:20,120 --> 00:20:22,435
لذلك، كما ذكرت،

256
00:20:22,435 --> 00:20:24,090
لتحميل ملف،

257
00:20:24,090 --> 00:20:26,920
سوف تستخدم البيانات متعددة الأجزاء/النموذج.

258
00:20:26,920 --> 00:20:29,865
لذلك، أولا، اسمحوا لي أن تسجيل نفسي في.

259
00:20:29,865 --> 00:20:33,560
لذلك، سأفعل وظيفة على المستخدمين المحليين تسجيل الدخول،

260
00:20:33,560 --> 00:20:36,140
وسوف تسجيل نفسي في كمشرف لأن المشرف

261
00:20:36,140 --> 00:20:38,815
فقط يمكن تحميل ملفاتهم هناك.

262
00:20:38,815 --> 00:20:45,350
تذكر أن الخادم الخاص بك يعمل الآن في المنفذ الآمن.

263
00:20:45,350 --> 00:20:52,580
لذا، سنقول https://localhost:3443،

264
00:20:52,580 --> 00:20:56,090
وليس هناك تفويض هنا.

265
00:20:56,090 --> 00:21:03,235
لذا، دعني أوقف التفويض هنا ثم أرسل الطلب إلى الخادم.

266
00:21:03,235 --> 00:21:06,005
لذلك، في ساعي البريد، إذا كان هذا يحدث،

267
00:21:06,005 --> 00:21:09,790
أنه يقول لا يمكن الحصول على أي استجابة،

268
00:21:09,790 --> 00:21:15,025
وهذا هو لأنك الآن تشغيل الخادم الآمن.

269
00:21:15,025 --> 00:21:17,095
لذا، في هذه الحالة،

270
00:21:17,095 --> 00:21:23,170
لن يقبل ساعي البريد الشهادة الموقعة ذاتيًا التي تأتي.

271
00:21:23,170 --> 00:21:28,790
لذلك، في هذه الحالة، افتح الإعدادات هنا وفي الإعدادات،

272
00:21:28,790 --> 00:21:31,360
تحت حقل الإعدادات العامة،

273
00:21:31,360 --> 00:21:34,765
سترى هذا التحقق من شهادة SSL.

274
00:21:34,765 --> 00:21:38,580
إيقاف تشغيل ذلك بحيث يكون ساعي البريد الخاص بك على استعداد لقبول

275
00:21:38,580 --> 00:21:43,975
الشهادة الموقعة ذاتيا التي قمنا بتثبيتها على جانب الخادم.

276
00:21:43,975 --> 00:21:47,450
لذا، هذه هي الطريقة التي ستتمكن من الاتصال بالخادم الخاص بك في

277
00:21:47,450 --> 00:21:53,300
نقطة نهاية تسجيل دخول المستخدم https://localhost:3443.

278
00:21:53,300 --> 00:21:55,775
لذلك، عندما نحاول تسجيل الدخول الآن،

279
00:21:55,775 --> 00:21:59,750
سترى الآن أن طلب المشاركة الخاص بك قد تم

280
00:21:59,750 --> 00:22:03,035
قبوله بنجاح من قبل الخادم

281
00:22:03,035 --> 00:22:06,275
ومن ثم رد الخادم مع معلومات الرمز المميز.

282
00:22:06,275 --> 00:22:12,515
لذا، مرة أخرى، للتأكد من أن ساعي البريد يسمح لك بالاتصال بالخادم الآمن،

283
00:22:12,515 --> 00:22:16,264
انقر فوق الإعدادات وتحت عام،

284
00:22:16,264 --> 00:22:20,645
قم بإيقاف التحقق من صحة شهادة SSL.

285
00:22:20,645 --> 00:22:23,195
لذلك، بمجرد تسجيل الدخول،

286
00:22:23,195 --> 00:22:25,605
دعونا نسخ الرمز المميز هنا.

287
00:22:25,605 --> 00:22:28,290
لذا، سأقوم بنسخ الرمز المميز هنا.

288
00:22:28,290 --> 00:22:31,000
الآن، دعونا نحاول تحميل الملف.

289
00:22:31,000 --> 00:22:34,215
لتحميل الملف، كما لاحظت،

290
00:22:34,215 --> 00:22:36,830
نحتاج إلى تحميل هذا الملف على localhost: 3443،

291
00:22:36,830 --> 00:22:46,080
ونقطة النهاية هي ImageUpload.

292
00:22:47,680 --> 00:22:51,200
للقيام ImageUpload هنا

293
00:22:51,200 --> 00:22:57,360
، في الرأس، نحتاج إلى تكوين التفويض.

294
00:22:57,490 --> 00:23:00,560
لذا، سنقوم بتكوين التفويض،

295
00:23:00,560 --> 00:23:03,035
ثم ستقول،

296
00:23:03,035 --> 00:23:08,820
«حامل»، وتوريد الرمز المميز الذي حصلنا عليه.

297
00:23:08,820 --> 00:23:14,785
لذا، احتفظ بنسخة من الرمز المميز في مكان ما وانسخ الرمز المميز في الرأس.

298
00:23:14,785 --> 00:23:18,260
في الجسم، لتحميل ملف،

299
00:23:18,260 --> 00:23:20,030
وسوف نستخدم هذا النموذج البيانات.

300
00:23:20,030 --> 00:23:24,020
لذلك، هذا هو ما يسمح لك أن تفعل متعدد الأجزاء/نموذج البيانات هنا.

301
00:23:24,020 --> 00:23:26,625
لذلك، عند النقر على بيانات النموذج،

302
00:23:26,625 --> 00:23:32,310
هنا يمكنك توفير هذا الملف هنا الذي تريد تحميله.

303
00:23:32,310 --> 00:23:36,040
لذلك، عند النقر فوق مفتاح جديد هنا،

304
00:23:37,870 --> 00:23:43,040
استخدم هذا المفتاح كـ ImageFile.

305
00:23:43,040 --> 00:23:52,695
أذكر أنه عندما قمنا بتكوين طريقة المشاركة على موقع UploadRouter،

306
00:23:52,695 --> 00:23:56,515
حددنا قائلا تحميل واحد ImageFile.

307
00:23:56,515 --> 00:23:59,670
لذا، هذا هو نفس المفتاح الذي ستستخدمه هنا.

308
00:23:59,670 --> 00:24:03,410
ثم، عند إعطاء المفتاح،

309
00:24:03,410 --> 00:24:05,270
ثم الجزء الثاني،

310
00:24:05,270 --> 00:24:09,875
ستقوم بتعيين هذا من نص إلى ملف هنا.

311
00:24:09,875 --> 00:24:15,595
لذلك، هذا هو ما يسمح لك لتحديد الملف كقيمة لهذا المفتاح معين.

312
00:24:15,595 --> 00:24:20,045
لذا، سترى هذا الزر قادم قائلا، «اختر الملفات».

313
00:24:20,045 --> 00:24:25,505
لذلك، يمكنك فتح ذلك ثم تحديد الملف الذي تريد تحميله.

314
00:24:25,505 --> 00:24:30,060
لذا، هنا، أنا ذاهب للذهاب إلى بلدي،

315
00:24:30,160 --> 00:24:37,470
لدي ملف في أحد المجلدات بلدي هنا.

316
00:24:37,470 --> 00:24:41,685
لذلك، أنا فقط ذاهب للذهاب إلى صور الأصول،

317
00:24:41,685 --> 00:24:46,640
وبعد ذلك سنقوم فقط تحميل ملف ينغ من هنا.

318
00:24:46,640 --> 00:24:48,230
لذلك، يمكنك أن تقول،

319
00:24:48,230 --> 00:24:50,280
«تحميل ملف معين».

320
00:24:50,280 --> 00:24:52,100
لذلك، كما تتذكر،

321
00:24:52,100 --> 00:24:56,020
قمنا بتكوين خادمنا لقبول ImageFile فقط.

322
00:24:56,020 --> 00:24:58,720
لذلك، سوف نقول، «تحميل هذا الملف معين.»

323
00:24:58,720 --> 00:25:03,050
ثم عند النقر على زر إرسال،

324
00:25:03,050 --> 00:25:04,940
لذلك لاحظ أنه في الجسم،

325
00:25:04,940 --> 00:25:07,145
لديك لتكوين هذا مع نموذج البيانات.

326
00:25:07,145 --> 00:25:11,240
لذا، فإن بيانات multipart/form-data، ثم المفتاح هو ImageFile،

327
00:25:11,240 --> 00:25:15,440
والقيمة هي الملف الذي حددته للتو،

328
00:25:15,440 --> 00:25:17,575
ثم انقر فوق الزر إرسال.

329
00:25:17,575 --> 00:25:19,940
لذلك، عند النقر فوق الزر إرسال،

330
00:25:19,940 --> 00:25:23,670
سيتم تحميل الملف إلى جانب الخادم الخاص بك

331
00:25:23,670 --> 00:25:27,770
ومن ثم سيرد الخادم مرة أخرى مع هذا الكائن.

332
00:25:27,770 --> 00:25:29,770
لذلك، هذا هو ما يرد في

333
00:25:29,770 --> 00:25:34,820
كائن req.file الموجود على كائن الطلب هنا.

334
00:25:34,820 --> 00:25:38,250
لذلك، يحتوي هذا req.file، كما ترى، على اسم حقل.

335
00:25:38,250 --> 00:25:39,590
اسم الحقل هو إيماجيفيل.

336
00:25:39,590 --> 00:25:43,200
لذلك، لاحظ أن هذا هو بالضبط نفس هذا واحد هنا.

337
00:25:43,200 --> 00:25:50,290
الاسم الأصلي، لذلك لاحظ أن تعبير الاسم الأصلي يحتوي على alberto.png،

338
00:25:50,290 --> 00:25:52,915
وهو الملف الذي قمت بتحميله.

339
00:25:52,915 --> 00:25:56,250
الآن يمكنك أن ترى لماذا عندما قمت بتكوين

340
00:25:56,250 --> 00:26:00,905
التخزين واسم الملف، أقوم بتعيين file.originalname.

341
00:26:00,905 --> 00:26:03,515
لذلك، هذا هو ما سيتم استخدامه هناك.

342
00:26:03,515 --> 00:26:05,410
يمكنك رؤية نوع الترميز،

343
00:26:05,410 --> 00:26:08,745
وmimetype، والوجهة،

344
00:26:08,745 --> 00:26:10,995
والمجلد الذي تم وضع الملف فيه،

345
00:26:10,995 --> 00:26:13,060
والمسار الفعلي للملف هنا،

346
00:26:13,060 --> 00:26:18,240
والمسار النسبي من جذر مجلد الخادم هنا.

347
00:26:18,240 --> 00:26:23,555
لذلك، يشير هذا المسار إلى حيث يمكن الوصول إلى الملف على جانب الخادم.

348
00:26:23,555 --> 00:26:29,865
لذلك، إذا كنت تقوم بتكوين تفاصيل طبق أو زعيم، على سبيل المثال،

349
00:26:29,865 --> 00:26:37,490
يمكنك ببساطة استخدام خاصية الصورة للزعيم إلى images/alberto.png.

350
00:26:37,490 --> 00:26:40,390
لا ينبغي استخدام الجمهور على أي حال لأن المجلد العمومي

351
00:26:40,390 --> 00:26:43,420
هو الذي يعمل كمجلد الجذر لخادمنا.

352
00:26:43,420 --> 00:26:46,560
لذلك، تحتاج فقط لتزويد هذه الصور. البرتو.

353
00:26:46,560 --> 00:26:49,475
لذلك، من هذا المسار الذي تحصل عليه،

354
00:26:49,475 --> 00:26:52,685
بمجرد تحميل الملف بنجاح، قم

355
00:26:52,685 --> 00:26:58,130
باستخراج هذا الجزء ثم استخدم ذلك للصورة في

356
00:26:58,130 --> 00:27:04,265
مستند JSON الخاص بك الذي يصف القائد المحدد.

357
00:27:04,265 --> 00:27:09,260
لذلك، هذه هي الطريقة التي نرفع بها ملف.

358
00:27:09,260 --> 00:27:11,985
الآن، لإقناعك بأن الغرامة تم تحميلها،

359
00:27:11,985 --> 00:27:14,375
دعنا نذهب إلى مشروعنا.

360
00:27:14,375 --> 00:27:16,655
الذهاب إلى مشروعنا،

361
00:27:16,655 --> 00:27:22,215
في المجلد العمومي،

362
00:27:22,215 --> 00:27:26,325
يمكنك الآن أن ترى أن هناك مجلد فرعي الصور هناك.

363
00:27:26,325 --> 00:27:28,120
في المجلد الفرعي للصور،

364
00:27:28,120 --> 00:27:32,785
يمكنك رؤية ملف alberta.png الذي تم تحميله هناك.

365
00:27:32,785 --> 00:27:37,635
الآن، يمكننا تحميل المزيد من ImageFiles إلى جانب الخادم الخاص بنا.

366
00:27:37,635 --> 00:27:40,425
الآن، إذا حاولت تحميل غير إيماجيفيل،

367
00:27:40,425 --> 00:27:42,980
سترى أن الخادم لن يقبل

368
00:27:42,980 --> 00:27:46,660
غير إيماجيفيل ثم الرد مرة أخرى قائلا،

369
00:27:46,660 --> 00:27:49,180
«لا يمكن قبول غير إيماجيفيل».

370
00:27:49,180 --> 00:27:54,050
لذا، هذه هي الطريقة التي سنقوم بها بتكوين خادمنا السريع

371
00:27:54,050 --> 00:27:59,390
لقبول تحميلات ImageFiles من جانب العميل.

372
00:27:59,390 --> 00:28:03,065
مع هذا، نكمل هذا التمرين.

373
00:28:03,065 --> 00:28:05,400
في هذا التمرين، رأينا كيف نستخدم

374
00:28:05,400 --> 00:28:09,840
الوحدة النمطية الوصفية لتكوين خادمنا السريع

375
00:28:09,840 --> 00:28:17,735
لقبول تحميلات الملفات على نقطة نهاية API /ImageUpload Rest.

376
00:28:17,735 --> 00:28:19,840
عندما نقوم بالنشر إلى نقطة

377
00:28:19,840 --> 00:28:25,585
النهاية، يتم تحميل الملف إلى مجلد محدد على موقع الخادم.

378
00:28:25,585 --> 00:28:27,900
مع هذا، نكمل هذا التمرين.

379
00:28:27,900 --> 00:28:34,890
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع الرسالة «تحميل الملف».