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
Они будут хранить эти файлы изображений в папке public или images.

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
Поэтому, как только мы установили multer модуль,

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
добавим новый файл с именем upload 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
Теперь мне понадобится модуль multer.

31
00:02:25,585 --> 00:02:29,280
После того, как мы включим модуль multer,

32
00:02:29,280 --> 00:02:35,585
теперь этот маршрутизатор я собираюсь называть это как маршрутизатор загрузки.

33
00:02:35,585 --> 00:02:42,020
Таким образом, будет сказать, загрузить маршрутизатор использовать body parser, а

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
multer, чтобы мы могли загружать файлы.

40
00:03:11,765 --> 00:03:19,545
Теперь, по умолчанию, multer можно настроить, просто используя multer в нашем приложении,

41
00:03:19,545 --> 00:03:24,360
но я собираюсь сделать некоторую конфигурацию multer в

42
00:03:24,360 --> 00:03:28,100
этом упражнении, так что мы собираемся

43
00:03:28,100 --> 00:03:32,615
настроить способ multer обрабатывает загрузку файлов.

44
00:03:32,615 --> 00:03:35,150
Таким образом, чтобы использовать multer,

45
00:03:35,150 --> 00:03:43,455
один из вариантов, которые multer принимает для хранения.

46
00:03:43,455 --> 00:03:49,295
Таким образом, multer предоставляет эту функцию хранения диска, которая

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 двоеточие,

50
00:04:03,830 --> 00:04:08,810
а затем указать папку назначения, в которой будут храниться загруженные файлы.

51
00:04:08,810 --> 00:04:15,450
Но здесь я собираюсь сделать дополнительную конфигурацию для multer модуля здесь.

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
был обработан multer, а также функцию обратного вызова.

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
null, а второй - папка назначения,

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 storage.

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
я передаю информацию обратно в мою конфигурацию multer, которая

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 true.

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
Две конфигурации, которые мы собираемся поставить в этот multer модуль.

159
00:12:03,410 --> 00:12:07,475
Как настроить multer модуль для использования в нашем приложении?

160
00:12:07,475 --> 00:12:12,489
Здесь я объявлю загрузку const

161
00:12:12,489 --> 00:12:19,300
как multer, а затем я бы указал в скобках, что варианты здесь.

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
Итак, он говорит, что вы можете загружать только файлы изображений, а затем для multer,

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
я собираюсь разрешить только метод post здесь.

175
00:13:20,325 --> 00:13:21,910
Таким образом,

176
00:13:21,910 --> 00:13:30,125
методы get, put и delete не будут разрешены на конечной точке маршрутизатора загрузки.

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
Скажем, если это операция get, то я не буду

182
00:13:53,500 --> 00:14:02,230
поддерживать, что на конечной точке будет ImageUpload.

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
Единственный метод, который я собираюсь поддерживать, - это метод post.

189
00:14:40,030 --> 00:14:41,920
Для метода post

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
Теперь, помимо проверки подлинности VerifyUser и проверки подлинности VerifyAdmin,

198
00:15:15,485 --> 00:15:21,280
в той же строке я настрою загрузку.

199
00:15:21,280 --> 00:15:27,270
Итак, напомним, что я настраивал загрузку, используя multer здесь.

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 Content-Type,

218
00:17:12,240 --> 00:17:18,920
«application/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
Затем загрузите документ dish 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
Вот как мы собираемся настраивать метод post там, вот и все.

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
вы будете использовать multipart/form-data.

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
Итак, в Postman, если это происходит,

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
Чтобы убедиться, что Postman позволит вам связаться с защищенным сервером,

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
Итак, это то, что позволяет вам делать multipart/form-data здесь.

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
Напомним, что когда мы настроили метод post на сайте 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
а затем мы просто загрузим PNG-файл отсюда.

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
Имя поля - ImageFile.

336
00:25:39,590 --> 00:25:43,200
Итак, обратите внимание, что это точно то же самое, что и здесь.

337
00:25:43,200 --> 00:25:50,290
Оригинальное имя, поэтому обратите внимание, что выражение originalname содержит 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
Public не должен использоваться в любом случае, потому

351
00:26:40,390 --> 00:26:43,420
что общая папка является той, которая действует как корневая папка для нашего сервера.

352
00:26:43,420 --> 00:26:46,560
Итак, вам просто нужно предоставить эти изображения.alberto.

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
Это хорошее время для вас сделать git фиксацию с сообщением «загрузка файла».