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
Таким образом, когда клиенты извлекают JSON-документ, описывающий

14
00:00:53,050 --> 00:00:59,790
блюдо, чтобы отобразить пользовательский интерфейс, то из документа 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
Таким образом, соответствующий метод будет post, а тип кодировки,

37
00:02:53,870 --> 00:02:58,140
вы установите его в multipart/form-data в вашей форме.

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
Загрузка файлов более эффективна с multipart/form-data.

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-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
С нашей точки зрения, когда мы используем multipart/form-data,

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
у вас будет тип содержимого, установленный в multipart/form-data.

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
, называемый типом содержимого, который установлен на multipart/form-data.

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
входящего сообщения запроса, которое я опубликовал с помощью метода post.

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
Кроме того, вы также укажите тот же Content-Disposition, что и данные формы,

82
00:06:18,810 --> 00:06:22,361
что означает, что они будут интерпретировать это как данные формы и

83
00:06:22,361 --> 00:06:24,920
соответствующее имя a s 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
А затем ниже он говорит Content-Type: image/png.

87
00:06:38,180 --> 00:06:41,620
Поэтому я загружаю этот файл изображения PNG здесь.

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
содержит эти multipart/form-данные в сообщении запроса.

131
00:09:52,560 --> 00:09:56,190
Таким образом, Multer - это модуль узла, где это

132
00:09:56,190 --> 00:09:59,930
поможет серверу обрабатывать multipart/form-data.

133
00:09:59,930 --> 00:10:04,330
Это написано поверх другого модуля npm под названием busboy.

134
00:10:04,330 --> 00:10:11,480
Busboy это модуль, который обрабатывает входящие данные HTML-формы, общие данные HTML-формы.

135
00:10:11,480 --> 00:10:16,350
И в частности, Multer наводит на busboy, чтобы вы могли

136
00:10:16,350 --> 00:10:20,330
обрабатывать составные /form-данные на стороне сервера.

137
00:10:20,330 --> 00:10:24,040
Теперь, когда он анализирует эту информацию, Multer будет

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
Объект files будет массивом, который содержит всю информацию для

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
давайте перейдем к упражнению, где мы фактически настроим модуль Multer.

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
[ МУЗЫКА]