1
00:00:00,000 --> 00:00:04,223
[MÚSICA] Os

2
00:00:04,223 --> 00:00:09,176
uploads de arquivos são um recurso comum suportado por muitos servidores.

3
00:00:09,176 --> 00:00:13,642
Então, ao preencher um formulário, por exemplo, você pode ter um campo lá

4
00:00:13,642 --> 00:00:18,600
onde você preenche um nome de arquivo e, em seguida, carregue esse arquivo para o lado do servidor.

5
00:00:18,600 --> 00:00:19,545
Como exemplo,

6
00:00:19,545 --> 00:00:23,890
suponha que você esteja carregando as informações sobre um prato para o lado do servidor.

7
00:00:23,890 --> 00:00:28,300
Então você também deseja carregar a imagem correspondente do prato

8
00:00:28,300 --> 00:00:29,510
para o lado do servidor.

9
00:00:29,510 --> 00:00:34,915
Então, no processo, você vai primeiro carregar a imagem do prato para o lado do servidor,

10
00:00:34,915 --> 00:00:36,770
obter um URL para

11
00:00:36,770 --> 00:00:41,170
essa imagem do lado do servidor onde quer que ela seja carregada e armazenada, e

12
00:00:41,170 --> 00:00:47,380
então usar essa imagem no documento JSON que descreve o prato em detalhes.

13
00:00:47,380 --> 00:00:53,050
De modo que, posteriormente, quando os clientes recuperam

14
00:00:53,050 --> 00:00:59,790
o documento JSON descrevendo o prato para renderizar a interface do usuário, então, a partir do documento JSON, eles

15
00:00:59,790 --> 00:01:04,310
poderão obter a URL da imagem prato que foi carregada no lado do servidor.

16
00:01:04,310 --> 00:01:07,510
E, em seguida, usá-lo na construção da interface do usuário.

17
00:01:07,510 --> 00:01:12,500
Assim, nos exemplos que vimos até agora, quando olhamos para os detalhes de

18
00:01:12,500 --> 00:01:16,880
um prato, vimos que há uma imagem preenchida lá, que é uma string,

19
00:01:16,880 --> 00:01:24,540
que não é nada além da URL para essa imagem correspondente a esse prato específico.

20
00:01:24,540 --> 00:01:32,300
Ou a promoção ou o leitor como construímos em nosso servidor REST API.

21
00:01:32,300 --> 00:01:37,210
Agora, nesta palestra, vamos aprender mais sobre como carregar arquivos.

22
00:01:37,210 --> 00:01:39,802
Como ele é suportado em um servidor?

23
00:01:39,802 --> 00:01:43,940
E então como podemos aproveitar um módulo de nó

24
00:01:43,940 --> 00:01:48,590
que nos permite suportar o upload de arquivos.

25
00:01:50,260 --> 00:01:53,630
Normalmente, os uploads de arquivos são suportados por meio de uma entrada de formulário.

26
00:01:53,630 --> 00:01:58,530
Então, em uma entrada, se você especificar o tipo como arquivo e

27
00:01:58,530 --> 00:02:03,800
o nome como o nome do campo lá,

28
00:02:03,800 --> 00:02:09,210
então você seria capaz de fornecer o arquivo que será carregado

29
00:02:09,210 --> 00:02:14,400
quando você clicar no botão enviar para este formulário particular aqui.

30
00:02:14,400 --> 00:02:20,234
Agora, quando as informações do arquivo são carregadas para o lado do servidor,

31
00:02:20,234 --> 00:02:24,714
os dados do formulário em si são normalmente codificados como

32
00:02:24,714 --> 00:02:31,200
application/x-www-form-urlencoded ou multipart/form-data.

33
00:02:31,200 --> 00:02:35,900
Então você desenha seu formulário, por exemplo, você irá projetar seu formulário com

34
00:02:35,900 --> 00:02:40,450
a ação definida como /ImageUpload na inclinação da API REST,

35
00:02:40,450 --> 00:02:48,760
que estará atuando como o ponto final para o qual você faz a postagem da imagem.

36
00:02:48,760 --> 00:02:53,870
Assim que o método correspondente seria post, e o tipo de codificação,

37
00:02:53,870 --> 00:02:58,140
você iria defini-lo para multipart/form-data dentro do seu formulário.

38
00:02:58,140 --> 00:03:02,797
Então, isso significa que os elementos de formulário serão codificados no tipo de codificação

39
00:03:02,797 --> 00:03:05,920
e, em seguida, carregados para o lado do servidor.

40
00:03:05,920 --> 00:03:11,228
O upload de arquivos é mais eficiente com multipart/form-data.

41
00:03:11,228 --> 00:03:16,130
E, portanto, essa é a abordagem preferida que usamos para fazer upload de arquivos.

42
00:03:17,560 --> 00:03:22,945
Agora, se você quiser saber mais detalhes sobre upload de arquivos e upload de

43
00:03:22,945 --> 00:03:28,843
formulários e aplicativo/x-www-form-urlencoded ou

44
00:03:28,843 --> 00:03:33,848
multipart/form-data, então você pode ler o HTML5

45
00:03:33,848 --> 00:03:37,410
(Recomendação W3C) onde os detalhes são fornecidos, e

46
00:03:37,410 --> 00:03:42,270
também o correspondente Pedido IETF para Comentados documentos.

47
00:03:42,270 --> 00:03:47,190
Eu tenho links para estes nos recursos adicionais caso você queira ler mais

48
00:03:47,190 --> 00:03:54,070
sobre os detalhes reais de como esses tipos de codificação de formulário são suportados.

49
00:03:55,090 --> 00:04:00,110
Da nossa perspectiva, quando usamos o multipart/form-data,

50
00:04:00,110 --> 00:04:04,850
quando isso é incluído em uma

51
00:04:04,850 --> 00:04:10,040
mensagem de solicitação HTTP que está indo para o lado do servidor, em seguida, no cabeçalho da mensagem de solicitação,

52
00:04:10,040 --> 00:04:15,320
você terá um tipo de conteúdo definido como multipart/form-data.

53
00:04:15,320 --> 00:04:19,410
E, em seguida, também um valor limite configurado assim.

54
00:04:19,410 --> 00:04:23,305
O limite separa as várias partes do corpo da solicitação.

55
00:04:23,305 --> 00:04:28,215
Assim, o próprio corpo de solicitação da mensagem de solicitação de saída será

56
00:04:28,215 --> 00:04:29,475
dividido em várias partes.

57
00:04:29,475 --> 00:04:33,375
E cada parte será delineada da parte anterior

58
00:04:33,375 --> 00:04:36,582
usando este limite aqui.

59
00:04:36,582 --> 00:04:40,912
Agora, a fim de ilustrar ainda mais os detalhes, eu preparei

60
00:04:40,912 --> 00:04:45,292
o servidor para imprimir esta informação da mensagem de solicitação recebida.

61
00:04:45,292 --> 00:04:49,202
Para que possamos examinar isso com um pouco mais de detalhes.

62
00:04:49,202 --> 00:04:52,092
Olhando para os detalhes de

63
00:04:52,092 --> 00:04:57,850
uma mensagem específica que eu enviei do meu carteiro para o lado do servidor,

64
00:04:57,850 --> 00:05:03,250
você pode notar que aqui, Eu imprimi os cabeçalhos de solicitação aqui.

65
00:05:03,250 --> 00:05:08,530
E, em particular, no cabeçalho da solicitação, deixe-me chamar sua atenção para este cabeçalho

66
00:05:08,530 --> 00:05:13,500
aqui, chamado tipo de conteúdo, que é definido como multipart/form-data.

67
00:05:13,500 --> 00:05:17,720
E, em seguida, note em particular o limite definido aqui

68
00:05:17,720 --> 00:05:20,660
com este número longo aqui.

69
00:05:20,660 --> 00:05:23,500
Então, esse é o cabeçalho de solicitação para

70
00:05:23,500 --> 00:05:28,400
a mensagem de solicitação de entrada que eu publiquei usando o método post.

71
00:05:28,400 --> 00:05:32,750
Na verdade, esta é exatamente a mensagem de solicitação que usarei

72
00:05:32,750 --> 00:05:37,710
no exercício que se segue a esta palestra, a fim de fazer upload do arquivo.

73
00:05:37,710 --> 00:05:42,110
Então, quando enviarmos esse arquivo lá, tudo bem, você vai notar que no

74
00:05:42,110 --> 00:05:46,920
corpo do pedido, então é aqui que eu imprimi o corpo do pedido aqui embaixo.

75
00:05:46,920 --> 00:05:49,010
E no corpo do pedido,

76
00:05:49,010 --> 00:05:54,460
você vai notar que ele imprime esta linha em particular aqui.

77
00:05:54,460 --> 00:05:58,040
E isso corresponde ao limite especificado aqui.

78
00:05:58,040 --> 00:06:04,717
Portanto, este limite essencialmente especifica a separação entre as várias partes

79
00:06:04,717 --> 00:06:10,070
do corpo multipart que faz parte desta mensagem de solicitação.

80
00:06:10,070 --> 00:06:13,330
Então, no corpo da solicitação, você verá isso sendo definido aqui.

81
00:06:13,330 --> 00:06:18,810
Além disso, você também irá especificar o mesmo Content-Disposition como form-data, o

82
00:06:18,810 --> 00:06:22,361
que significa que eles vão interpretar isso como dados de formulário e

83
00:06:22,361 --> 00:06:24,920
o nome correspondente a s ImageFile.

84
00:06:26,120 --> 00:06:30,569
E o nome do arquivo em si do lado do cliente que foi carregado,

85
00:06:30,569 --> 00:06:33,220
o nome do arquivo em si é dado aqui.

86
00:06:33,220 --> 00:06:38,180
E, em seguida, abaixo, ele diz Content-Type: image/png.

87
00:06:38,180 --> 00:06:41,620
Então eu estou carregando este arquivo de imagem PNG aqui.

88
00:06:41,620 --> 00:06:44,220
Então, estes são os detalhes que são descritos aqui.

89
00:06:44,220 --> 00:06:48,870
E à medida que você rolar para baixo até o próprio corpo da solicitação,

90
00:06:48,870 --> 00:06:53,480
você verá os detalhes do que está incluído no corpo da solicitação.

91
00:06:53,480 --> 00:07:00,680
Então isso dentro do arquivo PNG aqui, você verá esta informação no arquivo PNG.

92
00:07:00,680 --> 00:07:03,970
Então, se você abrir o arquivo PNG, isso é o que você veria aqui.

93
00:07:03,970 --> 00:07:07,200
Então isto contém um monte de caracteres aqui,

94
00:07:07,200 --> 00:07:09,960
que obviamente na tela não podem ser impressos.

95
00:07:09,960 --> 00:07:14,980
Então, à medida que você rolar para baixo, você vai todo esse conjunto de informações,

96
00:07:16,960 --> 00:07:21,730
que é realmente o que está contido no corpo da solicitação da

97
00:07:21,730 --> 00:07:26,310
mensagem de solicitação que está carregando este arquivo específico para o lado do servidor.

98
00:07:26,310 --> 00:07:30,720
Então você vê que esse corpo realmente contém a versão codificada

99
00:07:30,720 --> 00:07:33,640
da imagem lá.

100
00:07:33,640 --> 00:07:39,650
E este é o fim do limite para esse corpo de solicitação.

101
00:07:39,650 --> 00:07:44,960
Então, em nossa mensagem de solicitação, temos apenas um arquivo incluído aqui.

102
00:07:44,960 --> 00:07:48,230
Você também pode fazer upload de vários arquivos, se ainda assim desejar.

103
00:07:48,230 --> 00:07:53,140
Mas então, você precisa configurar o módulo npm apropriadamente para

104
00:07:53,140 --> 00:07:55,490
aceitar vários arquivos.

105
00:07:55,490 --> 00:08:02,780
Então, é assim que seu corpo de solicitação contém a versão codificada

106
00:08:02,780 --> 00:08:08,045
da imagem, a partir da qual seu servidor irá extrair a imagem

107
00:08:08,045 --> 00:08:12,515
e, em seguida, salvá-la no arquivo com o mesmo nome de arquivo no lado do servidor.

108
00:08:12,515 --> 00:08:17,245
Então é assim que vamos configurar nosso aplicativo, o aplicativo do lado do servidor,

109
00:08:17,245 --> 00:08:21,095
para fazer no exercício que segue esta palestra.

110
00:08:21,095 --> 00:08:23,990
Então eu pensei que seria um

111
00:08:23,990 --> 00:08:28,500
passo interessante para ilustrar para vocês exatamente o que meu servidor está recebendo.

112
00:08:28,500 --> 00:08:33,090
E isso dirá por que estamos especificando esse limite aqui.

113
00:08:33,090 --> 00:08:35,230
E como, dentro do próprio corpo de solicitação,

114
00:08:35,230 --> 00:08:41,163
estamos usando o limite para delinear as várias partes do corpo de solicitação.

115
00:08:41,163 --> 00:08:43,895
Assim, o lado do servidor, quando ele processa,

116
00:08:43,895 --> 00:08:49,645
será capaz de extrair os dados da imagem do corpo da solicitação apropriadamente

117
00:08:49,645 --> 00:08:52,660
e, em seguida, salvar o arquivo de imagem no lado do servidor.

118
00:08:53,890 --> 00:08:59,030
Então, assim como eu tenho ilustrado no terminal

119
00:08:59,030 --> 00:09:03,320
lá que o limite separa a parte do pedido de passagem múltipla.

120
00:09:03,320 --> 00:09:06,538
E assim você viu o limite especificado lá.

121
00:09:06,538 --> 00:09:12,843
Para trabalhar com os dados de formulário multipart contidos no corpo da solicitação,

122
00:09:12,843 --> 00:09:17,768
vamos usar um módulo NPR que suporta o processamento

123
00:09:17,768 --> 00:09:22,610
de dados de formulário multipart incluídos dentro do corpo da solicitação.

124
00:09:22,610 --> 00:09:25,290
Ele extrairá automaticamente tudo para você e, em

125
00:09:25,290 --> 00:09:31,218
seguida, carregá-lo em dois objetos no objeto de solicitação no lado do servidor.

126
00:09:31,218 --> 00:09:36,840
Então, este módulo NPM chamado Multer, que quando instalado

127
00:09:36,840 --> 00:09:41,280
em seu aplicativo do lado do servidor e

128
00:09:41,280 --> 00:09:44,910
configurar o seu servidor expresso para usar Multer.

129
00:09:44,910 --> 00:09:49,370
Em seguida, você será capaz de processar a mensagem de solicitação de entrada que

130
00:09:49,370 --> 00:09:52,560
contém este multipart/form-data na mensagem de solicitação.

131
00:09:52,560 --> 00:09:56,190
Então Multer é o módulo de nó onde isso

132
00:09:56,190 --> 00:09:59,930
ajudará o servidor lidar com multipart/form-data.

133
00:09:59,930 --> 00:10:04,330
Isto está escrito em cima de outro módulo NPM chamado garçom.

134
00:10:04,330 --> 00:10:11,480
Busboy é um módulo que processa dados de formulário HTML de entrada, dados gerais de formulário HTML.

135
00:10:11,480 --> 00:10:16,350
E um particular, Multer traz sobre o garçom para permitir que você

136
00:10:16,350 --> 00:10:20,330
processe multipart/form-data no lado do servidor.

137
00:10:20,330 --> 00:10:24,040
Agora, quando ele analisa essas informações, Multer irá

138
00:10:24,040 --> 00:10:29,280
carregar os dados de formulário de entrada e adiciona um objeto de corpo ao req.

139
00:10:29,280 --> 00:10:34,070
Então você terá um objeto req.body e também um objeto req.file.

140
00:10:34,070 --> 00:10:38,861
Se você carregar um único arquivo, em seguida, ele vai continuar req.file objeto.

141
00:10:38,861 --> 00:10:44,042
Em seguida, se você configurar o Multer para aceitar vários uploads de arquivos,

142
00:10:44,042 --> 00:10:47,590
poderá configurar o objeto req.files.

143
00:10:47,590 --> 00:10:51,480
O objeto de arquivos será uma matriz que contém todas as informações para

144
00:10:51,480 --> 00:10:54,878
cada arquivo específico que é carregado no lado do servidor.

145
00:10:54,878 --> 00:11:00,565
O próprio objeto de arquivo contém informações que resumem

146
00:11:00,565 --> 00:11:05,714
a maneira como o arquivo é salvo no lado do servidor pelo Multer.

147
00:11:05,714 --> 00:11:09,219
Com essa compreensão rápida de como o upload de arquivos funciona,

148
00:11:09,219 --> 00:11:14,340
vamos passar para o exercício onde vamos realmente configurar o módulo Multer.

149
00:11:14,340 --> 00:11:19,113
E, em seguida, usá-lo dentro do nosso aplicativo expresso para lidar com uploads

150
00:11:19,113 --> 00:11:20,685
de arquivos do lado do cliente.

151
00:11:20,685 --> 00:11:26,869
[ MUSIC]