1
00:00:03,680 --> 00:00:05,985
Na lição anterior,

2
00:00:05,985 --> 00:00:08,880
aprendemos sobre como os uploads de arquivos são

3
00:00:08,880 --> 00:00:12,445
suportados através da abordagem de dados multiplataforma.

4
00:00:12,445 --> 00:00:16,320
Neste exercício, vamos fazer uso do módulo Multer,

5
00:00:16,320 --> 00:00:21,885
que mencionamos na palestra para permitir que nosso servidor express

6
00:00:21,885 --> 00:00:27,820
suporte o upload de arquivos de imagem em nosso site do servidor.

7
00:00:27,820 --> 00:00:33,920
Eles armazenarão esses arquivos de imagens na pasta público/images.

8
00:00:33,920 --> 00:00:40,370
Estas imagens seriam úteis dentro da nossa aplicação quando fornecemos

9
00:00:40,370 --> 00:00:46,690
imagens para os vários pratos, radares ou promoções,

10
00:00:46,690 --> 00:00:51,490
que construímos no nosso servidor REST API.

11
00:00:51,490 --> 00:00:54,495
Para começar com este exercício,

12
00:00:54,495 --> 00:00:55,770
o primeiro passo,

13
00:00:55,770 --> 00:01:01,445
é claro, é instalar o módulo Multer para o prompt tipo npm instalar

14
00:01:01,445 --> 00:01:10,145
multer menos salvar e no momento eu estou usando multer 1.3.1 neste curso.

15
00:01:10,145 --> 00:01:12,785
Então, uma vez instalado o módulo multer,

16
00:01:12,785 --> 00:01:21,695
vamos para o nosso projeto e, em seguida, implementar uma nova rota que nos permite fazer upload de arquivos.

17
00:01:21,695 --> 00:01:25,920
Vá para o projeto na pasta rotas,

18
00:01:25,920 --> 00:01:33,210
vamos adicionar um novo arquivo chamado upload router.js.

19
00:01:33,210 --> 00:01:37,260
Este roteador, roteador expresso que vamos implementar aqui,

20
00:01:37,260 --> 00:01:43,380
é o que vai suportar o upload dos arquivos.

21
00:01:43,380 --> 00:01:46,250
Então, no roteador de upload deixe-me apenas ir para

22
00:01:46,250 --> 00:01:50,120
o roteador prato e copiar essas primeiras coisas do roteador prato

23
00:01:50,120 --> 00:01:52,550
porque nós estamos praticamente indo para configurar

24
00:01:52,550 --> 00:01:57,440
estrutura semelhante em nosso aplicativo ou o roteador de upload.

25
00:01:57,440 --> 00:02:00,720
Então, deixe-me copiar essa parte e então vamos editar isso.

26
00:02:00,720 --> 00:02:02,800
Então, no roteador de upload,

27
00:02:02,800 --> 00:02:09,850
eu não preciso de mangusto, então eu vou remover o mangusto e eu não preciso dos pratos também.

28
00:02:09,850 --> 00:02:12,755
Então, esses dois seriam removidos e depois disso

29
00:02:12,755 --> 00:02:15,935
precisamos expressar o analisador corporal e autenticar.

30
00:02:15,935 --> 00:02:25,585
Agora, vou precisar do módulo Multer aqui.

31
00:02:25,585 --> 00:02:29,280
Uma vez que incluímos o módulo multer,

32
00:02:29,280 --> 00:02:35,585
agora este roteador eu vou chamar isso como roteador de upload.

33
00:02:35,585 --> 00:02:42,020
Então, vai dizer upload roteador usar o analisador de corpo e

34
00:02:42,020 --> 00:02:48,040
, em seguida, este, mas o roteador de upload e novamente,

35
00:02:48,040 --> 00:02:58,110
lembre-se de dizer exportações de módulo, upload roteador aqui.

36
00:02:58,110 --> 00:03:00,570
Então, para a rota de roteadores de upload,

37
00:03:00,570 --> 00:03:03,025
precisamos adicionar os vários métodos.

38
00:03:03,025 --> 00:03:07,130
Eu vou fazer isso um pouco mais tarde, mas antes disso vamos configurar o

39
00:03:07,130 --> 00:03:11,765
Multer para nos permitir carregar os arquivos.

40
00:03:11,765 --> 00:03:19,545
Agora, por padrão, multer pode ser configurado simplesmente usando multer dentro da nossa aplicação,

41
00:03:19,545 --> 00:03:24,360
mas eu vou fazer alguma configuração de multer

42
00:03:24,360 --> 00:03:28,100
neste exercício para que nós vamos

43
00:03:28,100 --> 00:03:32,615
personalizar a forma como multer lida com o upload dos arquivos.

44
00:03:32,615 --> 00:03:35,150
Então, para usar o multer,

45
00:03:35,150 --> 00:03:43,455
uma das opções que o multer leva é para o armazenamento.

46
00:03:43,455 --> 00:03:49,295
Então, multer fornece esta função de armazenamento

47
00:03:49,295 --> 00:03:56,480
em disco que nos permite definir o mecanismo de armazenamento e aqui podemos configurar algumas coisas.

48
00:03:56,480 --> 00:04:00,409
Agora, se é apenas uma questão de configurar o destino,

49
00:04:00,409 --> 00:04:03,830
você pode simplesmente dizer dois-pontos destinos

50
00:04:03,830 --> 00:04:08,810
e, em seguida, especificar a pasta de destino dentro da qual os arquivos enviados serão armazenados.

51
00:04:08,810 --> 00:04:15,450
Mas aqui eu vou fazer alguma configuração adicional para o módulo multer aqui.

52
00:04:15,450 --> 00:04:19,715
Então, este é o lugar onde eu vou usar o suporte de armazenamento de disco multer.

53
00:04:19,715 --> 00:04:22,025
Dentro do armazenamento em disco,

54
00:04:22,025 --> 00:04:27,080
posso definir algumas opções aqui.

55
00:04:27,080 --> 00:04:32,315
As opções que eu vou definir vão ser

56
00:04:32,315 --> 00:04:40,535
destino e a segunda é o nome do arquivo.

57
00:04:40,535 --> 00:04:45,725
Então, duas configurações que eu vou fornecer para o armazenamento em disco.

58
00:04:45,725 --> 00:04:48,860
O destino como você esperaria,

59
00:04:48,860 --> 00:04:56,405
me permite configurar o destino e isso leva

60
00:04:56,405 --> 00:05:03,450
como uma configuração aqui uma função.

61
00:05:03,450 --> 00:05:06,980
Então, o destino é configurado como uma função aqui.

62
00:05:06,980 --> 00:05:14,060
Esta função receberá solicitação e também um objeto chamado o arquivo,

63
00:05:14,060 --> 00:05:16,790
que contém informações sobre o arquivo que

64
00:05:16,790 --> 00:05:21,930
foi processado por multer e também uma função de retorno de chamada.

65
00:05:21,930 --> 00:05:24,045
Então, cb é a função de retorno de chamada.

66
00:05:24,045 --> 00:05:27,915
Então, aqui para o destino,

67
00:05:27,915 --> 00:05:32,865
eu vou dizer cb null,

68
00:05:32,865 --> 00:05:37,054
o segundo parâmetro é a pasta de destino,

69
00:05:37,054 --> 00:05:41,330
que pode ser expressa como uma string onde os arquivos serão armazenados.

70
00:05:41,330 --> 00:05:51,025
Então, aqui, eu vou fornecer o destino como imagens públicas de barra.

71
00:05:51,025 --> 00:05:54,980
Porque neste exercício eu vou apoiar uploads de imagens.

72
00:05:54,980 --> 00:05:59,865
Então, essa é a parte que eu vou especificar aqui, então upload de imagem.

73
00:05:59,865 --> 00:06:03,800
Então, a função de retorno de chamada como você vê leva dois parâmetros.

74
00:06:03,800 --> 00:06:04,820
O primeiro é, é claro,

75
00:06:04,820 --> 00:06:07,460
o erro que neste caso eu vou configurá-lo como

76
00:06:07,460 --> 00:06:11,335
nulo e o segundo é a pasta de destino,

77
00:06:11,335 --> 00:06:14,110
onde minhas imagens serão armazenadas.

78
00:06:14,110 --> 00:06:19,010
Então, eu posso configurar isso dizendo imagens de barra pública.

79
00:06:19,010 --> 00:06:20,995
Então, na pasta de imagens,

80
00:06:20,995 --> 00:06:24,300
os arquivos que eu carrego serão armazenados.

81
00:06:24,300 --> 00:06:26,370
Para o nome do arquivo também,

82
00:06:26,370 --> 00:06:31,320
ele obtém os três parâmetros,

83
00:06:31,320 --> 00:06:35,985
mensagem de solicitação, arquivo e a função de retorno de chamada.

84
00:06:35,985 --> 00:06:39,345
Da configuração da forma como a função de retorno de chamada é chamada,

85
00:06:39,345 --> 00:06:42,140
podemos especificar informações sobre o nome do arquivo.

86
00:06:42,140 --> 00:06:47,205
Então, para a função callback eu diria cb null e não há nenhum erro aqui.

87
00:06:47,205 --> 00:06:51,860
Então o segundo insiste no nome do arquivo,

88
00:06:51,860 --> 00:06:56,430
que será usado para o arquivo específico que acabou de ser carregado,

89
00:06:56,430 --> 00:06:57,975
como ele será armazenado.

90
00:06:57,975 --> 00:07:01,835
Então, este objeto de arquivo que eu obtive aqui,

91
00:07:01,835 --> 00:07:08,595
suporta um conjunto de várias propriedades nele.

92
00:07:08,595 --> 00:07:11,985
Uma das propriedades é chamada, nome original.

93
00:07:11,985 --> 00:07:14,585
Então, o nome original essencialmente,

94
00:07:14,585 --> 00:07:19,475
dá-nos o nome original do arquivo do lado do cliente que foi carregado.

95
00:07:19,475 --> 00:07:23,410
Insisto que, quando o arquivo for salvo no lado

96
00:07:23,410 --> 00:07:26,380
do servidor, o arquivo receberá exatamente o

97
00:07:26,380 --> 00:07:29,710
mesmo nome que o nome original do arquivo que foi carregado.

98
00:07:29,710 --> 00:07:32,605
Para que eu possa saber que estou carregando

99
00:07:32,605 --> 00:07:35,140
exatamente o mesmo arquivo e no lado do servidor quando

100
00:07:35,140 --> 00:07:38,200
o arquivo é carregado será armazenado com o mesmo nome.

101
00:07:38,200 --> 00:07:42,000
Agora, se você não configurar isso então,

102
00:07:42,000 --> 00:07:45,100
multer por padrão dará alguma string aleatória

103
00:07:45,100 --> 00:07:48,130
como o nome do arquivo sem extensões.

104
00:07:48,130 --> 00:07:51,590
Então, isso pode não ser algo que você ficaria

105
00:07:51,590 --> 00:07:55,290
feliz em usar neste exercício particular.

106
00:07:55,290 --> 00:07:58,940
Então, é por isso que eu estou configurando explicitamente dizendo que,

107
00:07:58,940 --> 00:08:04,805
o arquivo deve ser armazenado com o nome original do arquivo que foi carregado.

108
00:08:04,805 --> 00:08:08,300
Vamos novamente encontrar este objeto de arquivo em

109
00:08:08,300 --> 00:08:11,630
um pouco mais de detalhes e ver como

110
00:08:11,630 --> 00:08:15,245
podemos fazer uso de informações do objeto de arquivo um pouco mais tarde.

111
00:08:15,245 --> 00:08:22,790
Além disso, eu também posso especificar um filtro de arquivo aqui para a configuração de multers.

112
00:08:22,790 --> 00:08:28,145
O filtro de arquivo me permitirá especificar que tipo de arquivos

113
00:08:28,145 --> 00:08:33,410
estou disposto a carregar ou que estou disposto a aceitar para upload.

114
00:08:33,410 --> 00:08:37,310
Então, para fazer isso eu vou configurar outra função chamada

115
00:08:37,310 --> 00:08:42,480
filtro de arquivo de imagem const

116
00:08:43,360 --> 00:08:48,755
e este eu vou definir a função em um minuto.

117
00:08:48,755 --> 00:08:51,530
Agora, para isso, eu também posso salvar isso como

118
00:08:51,530 --> 00:08:55,580
armazenamento const porque nós temos usado const para tudo,

119
00:08:55,580 --> 00:08:57,650
então, eu vou apenas dizer armazenamento const.

120
00:08:57,650 --> 00:08:59,480
Para o filtro de arquivo de imagem,

121
00:08:59,480 --> 00:09:01,490
vou dizer filtro de arquivo de imagem const.

122
00:09:01,490 --> 00:09:07,725
Novamente, ele recebe três parâmetros de solicitação

123
00:09:07,725 --> 00:09:11,780
, objeto, o objeto de arquivo que contém as informações sobre

124
00:09:11,780 --> 00:09:15,660
o arquivo que foi carregado e a função de retorno de chamada aqui.

125
00:09:15,660 --> 00:09:17,260
Através da função de retorno de chamada,

126
00:09:17,260 --> 00:09:22,535
vou passar informações de volta para a minha configuração multer que

127
00:09:22,535 --> 00:09:27,800
me permite especificar como vou armazenar essas informações.

128
00:09:27,800 --> 00:09:30,590
Então, isso vai ser uma função de seta aqui.

129
00:09:30,590 --> 00:09:35,800
Dentro desta função de seta o que eu vou verificar é que,

130
00:09:35,800 --> 00:09:45,405
Eu vou dizer se não o nome original do arquivo corresponde.

131
00:09:45,405 --> 00:09:49,340
Então, o nome original é uma string aqui.

132
00:09:49,340 --> 00:09:55,780
Então, eu estou tentando ver se há uma correspondência para essa string dizendo,

133
00:09:55,780 --> 00:09:58,260
aqui dentro uma expressão regular.

134
00:09:58,260 --> 00:10:01,570
Então, a expressão regular eu vou especificá-la como barra,

135
00:10:01,570 --> 00:10:05,505
barra invertida ponto e, em seguida,

136
00:10:05,505 --> 00:10:09,565
as opções que eu vou especificar é jpg

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

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

139
00:10:25,250 --> 00:10:31,575
Então, é assim que eu especifico a expressão regular lá.

140
00:10:31,575 --> 00:10:32,785
Para dizer que tudo bem,

141
00:10:32,785 --> 00:10:38,515
se a extensão do arquivo contém jpg ou jpeg ou png ou gif,

142
00:10:38,515 --> 00:10:44,630
então eu vou tratar isso como um arquivo de imagem e eu estarei disposto a aceitar esses arquivos.

143
00:10:44,630 --> 00:10:47,225
Então, é isso que estamos testando aqui.

144
00:10:47,225 --> 00:10:49,690
Se esse for o caso,

145
00:10:49,690 --> 00:10:54,920
isto é, se a extensão do arquivo não corresponder a nenhuma dessas coisas, então,

146
00:10:54,920 --> 00:11:02,460
é por isso que estamos vendo não, então vamos dizer, return cb.

147
00:11:02,460 --> 00:11:07,890
Em seguida, observe que, o cb o primeiro parâmetro seria um erro.

148
00:11:07,890 --> 00:11:12,150
Então, eu retornarei um novo erro

149
00:11:12,150 --> 00:11:18,375
dizendo que você pode carregar apenas arquivos de imagem.

150
00:11:18,375 --> 00:11:23,195
Então, estamos insistindo que os únicos arquivos que eles

151
00:11:23,195 --> 00:11:28,565
aceitarão são arquivos de imagem e o segundo parâmetro seria falso.

152
00:11:28,565 --> 00:11:32,240
Como estamos fornecendo o erro como o primeiro parâmetro,

153
00:11:32,240 --> 00:11:35,460
o segundo parâmetro é definido como false.

154
00:11:36,620 --> 00:11:44,340
O caso contrário é dizer cb null true.

155
00:11:44,340 --> 00:11:49,840
Então, o que significa que o arquivo que está tentando ser

156
00:11:49,840 --> 00:11:55,440
carregado corresponde ao padrão e por isso é um arquivo de imagem,

157
00:11:55,440 --> 00:11:57,955
e por isso estamos dispostos a deixá-lo ser carregado.

158
00:11:57,955 --> 00:12:03,410
Duas configurações que vamos fornecer para esse módulo Multer.

159
00:12:03,410 --> 00:12:07,475
Como configuramos o módulo multer para uso dentro da nossa aplicação?

160
00:12:07,475 --> 00:12:12,489
Este é o lugar onde eu vou declarar const upload

161
00:12:12,489 --> 00:12:19,300
como multer e, em seguida, eu iria especificar entre parênteses que opções aqui.

162
00:12:19,300 --> 00:12:27,790
Posso especificar o armazenamento como a função de armazenamento que acabei de definir aqui.

163
00:12:27,790 --> 00:12:31,645
Esta função de armazenamento como o primeiro parâmetro,

164
00:12:31,645 --> 00:12:35,625
e o segundo parâmetro é um filtro de arquivo.

165
00:12:35,625 --> 00:12:40,335
Um filtro de arquivo é um método que me permite especificar

166
00:12:40,335 --> 00:12:46,760
que tipo de arquivo eu estou disposto a aceitar e então eu vou dizer, filtro de arquivo de imagem.

167
00:12:46,760 --> 00:12:48,890
Basta alternar o contorno da palavra,

168
00:12:48,890 --> 00:12:51,860
para que você possa ver toda a linha aqui.

169
00:12:51,860 --> 00:12:57,045
Então, ele diz que você pode carregar apenas arquivos de imagem e, em seguida, para o multer,

170
00:12:57,045 --> 00:13:01,750
eu estou configurando o filtro de imagem, é isso.

171
00:13:01,750 --> 00:13:10,435
Meu módulo multer agora está configurado para permitir que eu carregue os arquivos de imagem aqui.

172
00:13:10,435 --> 00:13:15,115
Então vamos agora em frente e configurar o roteador de upload.

173
00:13:15,115 --> 00:13:16,670
Para o roteador de upload,

174
00:13:16,670 --> 00:13:20,325
vou permitir apenas o método post aqui.

175
00:13:20,325 --> 00:13:21,910
Portanto, os

176
00:13:21,910 --> 00:13:30,125
métodos get, put e delete não serão permitidos no endpoint do roteador de upload.

177
00:13:30,125 --> 00:13:32,130
Para me ajudar a fazer isso,

178
00:13:32,130 --> 00:13:38,270
vou ao roteador prato e depois lembrar que já tínhamos o put configurado aqui.

179
00:13:38,270 --> 00:13:42,230
Vou copiar isso e, em seguida, vir para

180
00:13:42,230 --> 00:13:47,730
o roteador de upload e, em seguida, eu vou colar essa informação aqui.

181
00:13:47,730 --> 00:13:53,500
Vamos dizer, se é uma operação get, então eu não vou

182
00:13:53,500 --> 00:14:02,230
apoiar que no endpoint seria ImageUpload.

183
00:14:02,580 --> 00:14:05,545
O get não será permitido,

184
00:14:05,545 --> 00:14:13,040
e da mesma forma o put não será permitido,

185
00:14:13,710 --> 00:14:20,000
e também excluir não será permitido.

186
00:14:20,640 --> 00:14:31,310
Não vou apoiar nenhuma dessas operações, então coloque, exclua.

187
00:14:31,310 --> 00:14:33,555
Estes três não serão permitidos.

188
00:14:33,555 --> 00:14:40,030
O único método que eu vou apoiar é o método post.

189
00:14:40,030 --> 00:14:41,920
Para o método post,

190
00:14:41,920 --> 00:14:47,950
vamos fazer essa autenticação todo o caminho até esse ponto.

191
00:14:47,950 --> 00:14:50,560
Eu só vou copiar isso lá dentro,

192
00:14:50,560 --> 00:14:57,205
fechar o ponto final e para o post.

193
00:14:57,205 --> 00:14:59,125
Quando um arquivo é publicado,

194
00:14:59,125 --> 00:15:03,035
como lidamos com esse post?

195
00:15:03,035 --> 00:15:06,320
Para lidar com o posto aqui,

196
00:15:06,320 --> 00:15:09,885
não preciso do próximo para isso.

197
00:15:09,885 --> 00:15:15,485
Agora, além do autenticar VerifyUser e autenticar VerifyAdmin,

198
00:15:15,485 --> 00:15:21,280
na mesma linha eu configurarei o upload.

199
00:15:21,280 --> 00:15:27,270
Então, lembre-se que eu tinha configurado upload usando multer aqui.

200
00:15:27,270 --> 00:15:29,790
Então, eu vou fazer uso do upload que

201
00:15:29,790 --> 00:15:34,200
suporta uma função chamada como upload.single.

202
00:15:34,200 --> 00:15:42,400
Esta única função toma como parâmetro.

203
00:15:42,400 --> 00:15:49,630
O nome do campo de formulário que especifica esse arquivo,

204
00:15:49,630 --> 00:15:52,300
você verá que em um curto espaço de tempo.

205
00:15:52,300 --> 00:16:01,930
Este campo de formulário vou nomeá-lo como ImageFile aqui.

206
00:16:01,930 --> 00:16:09,455
Upload single significa que ele vai permitir que eu carregue apenas um único arquivo aqui.

207
00:16:09,455 --> 00:16:15,065
Esse único arquivo especificará no formulário de upload do lado do cliente

208
00:16:15,065 --> 00:16:21,730
no upload de formulário de várias partes usando esse nome lá.

209
00:16:21,860 --> 00:16:26,525
Quando o arquivo é obtido no código,

210
00:16:26,525 --> 00:16:28,060
se eu chegar a este ponto,

211
00:16:28,060 --> 00:16:32,290
este upload cuidará de lidar com os erros se houver algum,

212
00:16:32,290 --> 00:16:36,585
se o arquivo não for carregado corretamente e assim por diante.

213
00:16:36,585 --> 00:16:38,315
Quando você chegar a este ponto,

214
00:16:38,315 --> 00:16:40,630
o arquivo teria sido carregado com sucesso e

215
00:16:40,630 --> 00:16:43,510
então você precisa lidar com o arquivo carregado.

216
00:16:43,510 --> 00:16:52,750
Neste ponto, vamos dizer Res.StatusCode é

217
00:16:52,750 --> 00:17:02,780
200 e, em seguida, Res.SetHeader Content-Type,

218
00:17:12,240 --> 00:17:18,920
'application/json'. O que eu vou fazer aqui é que,

219
00:17:19,920 --> 00:17:30,060
vamos passar de volta este objeto req.file do servidor de volta para o cliente.

220
00:17:30,060 --> 00:17:36,570
Este objeto req.file também conterá o caminho para o arquivo lá dentro e esse caminho pode ser

221
00:17:36,570 --> 00:17:39,890
usado pelo cliente para configurar qualquer lugar

222
00:17:39,890 --> 00:17:43,735
onde ele precisa saber a localização deste arquivo de imagem.

223
00:17:43,735 --> 00:17:47,355
Por exemplo, se você estiver tentando carregar um prato

224
00:17:47,355 --> 00:17:51,060
para o lado do servidor e os detalhes do prato para o lado do servidor,

225
00:17:51,060 --> 00:17:53,700
você pode carregar a imagem para o servidor e, em seguida,

226
00:17:53,700 --> 00:17:56,230
obter de volta o URL dessa imagem e, em seguida, você pode

227
00:17:56,230 --> 00:18:02,315
incluir o URL dessa imagem no objeto json que descreve o prato.

228
00:18:02,315 --> 00:18:09,675
Em seguida, carregue o documento json prato para o lado do servidor.

229
00:18:09,675 --> 00:18:12,805
Em seguida, o req.file é passado de volta para

230
00:18:12,805 --> 00:18:18,190
o cliente, o req.file como você verá quando executamos este servidor,

231
00:18:18,190 --> 00:18:20,670
o req.file contém um monte de informações sobre

232
00:18:20,670 --> 00:18:23,370
o arquivo que acabou de ser carregado e então eu vou

233
00:18:23,370 --> 00:18:29,700
examinar isso para obter informações sobre o arquivo que eu acabei de carregar.

234
00:18:29,910 --> 00:18:38,405
É assim que vamos configurar o método post lá, é isso.

235
00:18:38,405 --> 00:18:44,330
Meu roteador de upload está pronto para aceitar uploads dos arquivos.

236
00:18:44,330 --> 00:18:51,440
Agora, tudo o que eu preciso fazer é ir para app.js e, em seguida, configurar o roteador de upload.

237
00:18:51,440 --> 00:18:53,335
Então, indo para app.js

238
00:18:53,335 --> 00:18:55,550
Já temos todos esses roteadores.

239
00:18:55,550 --> 00:19:00,350
Então, deixe-me apenas copiar seu LeaderRouter e, em seguida,

240
00:19:00,350 --> 00:19:07,475
configurar isso como UploadRouter.

241
00:19:07,475 --> 00:19:14,150
Então, isso está no arquivo UploadRouter aqui.

242
00:19:14,150 --> 00:19:18,965
Então, vamos configurar o UploadRouter e, em seguida, indo abaixo aqui,

243
00:19:18,965 --> 00:19:28,010
vamos agora configurar o endpoint ImageUpload.

244
00:19:28,010 --> 00:19:32,525
Então, o endpoint ImageUpload me permite fazer upload do arquivo.

245
00:19:32,525 --> 00:19:37,880
Então, isso seria UploadRouter. É isso.

246
00:19:37,880 --> 00:19:44,740
Meu aplicativo agora está configurado para aceitar uploads de arquivos.

247
00:19:44,740 --> 00:19:51,130
Então, vamos salvar as alterações e, em seguida, ir e dar uma olhada em como nosso aplicativo funciona.

248
00:19:51,130 --> 00:19:53,700
Voltando para o Terminal,

249
00:19:53,700 --> 00:19:58,310
agora certifique-se de que você tem seu servidor MongoDB funcionando em

250
00:19:58,310 --> 00:20:03,020
uma das guias Terminal ou em um dos comandos Windows.

251
00:20:03,020 --> 00:20:04,640
Na outra janela,

252
00:20:04,640 --> 00:20:09,210
vamos iniciar o servidor.

253
00:20:09,210 --> 00:20:12,455
Uma vez que o nosso servidor está funcionando,

254
00:20:12,455 --> 00:20:20,120
vamos para o Postman e, em seguida, enviar ou melhor, fazer upload de um arquivo do Postman.

255
00:20:20,120 --> 00:20:22,435
Então, como eu mencionei,

256
00:20:22,435 --> 00:20:24,090
para carregar um arquivo,

257
00:20:24,090 --> 00:20:26,920
você estará usando o multipart/form-data.

258
00:20:26,920 --> 00:20:29,865
Então, primeiro, deixe-me entrar.

259
00:20:29,865 --> 00:20:33,560
Então, eu vou fazer uma postagem no login de usuários locais,

260
00:20:33,560 --> 00:20:36,140
e eu vou me conectar como o administrador porque

261
00:20:36,140 --> 00:20:38,815
apenas o administrador pode fazer upload de seus arquivos lá.

262
00:20:38,815 --> 00:20:45,350
Lembre-se de que seu servidor está agora em execução na porta segura.

263
00:20:45,350 --> 00:20:52,580
Então, vamos dizer https://localhost:3443,

264
00:20:52,580 --> 00:20:56,090
e não há autorização aqui.

265
00:20:56,090 --> 00:21:03,235
Então, deixe-me desligar a autorização aqui e, em seguida, enviar o pedido para o servidor.

266
00:21:03,235 --> 00:21:06,005
Então, no Postman, se isso está acontecendo,

267
00:21:06,005 --> 00:21:09,790
que ele diz que não poderia obter qualquer resposta,

268
00:21:09,790 --> 00:21:15,025
isso é porque você está executando agora o servidor seguro.

269
00:21:15,025 --> 00:21:17,095
Então, nesse caso, o

270
00:21:17,095 --> 00:21:23,170
Carteiro não aceitará o certificado autoassinado que está chegando.

271
00:21:23,170 --> 00:21:28,790
Então, nesse caso, abra as configurações aqui e nas configurações,

272
00:21:28,790 --> 00:21:31,360
no campo de configurações gerais,

273
00:21:31,360 --> 00:21:34,765
você verá esta verificação de certificado SSL.

274
00:21:34,765 --> 00:21:38,580
Desative isso para que seu Postman esteja disposto a aceitar

275
00:21:38,580 --> 00:21:43,975
o certificado autoassinado que instalamos no lado do servidor.

276
00:21:43,975 --> 00:21:47,450
Então, é assim que você poderá entrar em contato com seu servidor no

277
00:21:47,450 --> 00:21:53,300
endpoint de login do usuário https://localhost:3443.

278
00:21:53,300 --> 00:21:55,775
Então, quando tentamos fazer login agora,

279
00:21:55,775 --> 00:21:59,750
você verá que sua solicitação de postagem foi

280
00:21:59,750 --> 00:22:03,035
aceita com sucesso pelo servidor

281
00:22:03,035 --> 00:22:06,275
e, em seguida, o servidor responde com as informações de token.

282
00:22:06,275 --> 00:22:12,515
Então, novamente, para garantir que o Postman permita que você entre em contato com o servidor seguro,

283
00:22:12,515 --> 00:22:16,264
clique em Configurações e, em Geral,

284
00:22:16,264 --> 00:22:20,645
desative a validação do certificado SSL.

285
00:22:20,645 --> 00:22:23,195
Então, uma vez que você fizer login,

286
00:22:23,195 --> 00:22:25,605
vamos copiar o token aqui.

287
00:22:25,605 --> 00:22:28,290
Então, vou copiar a ficha aqui.

288
00:22:28,290 --> 00:22:31,000
Agora, vamos tentar carregar o arquivo.

289
00:22:31,000 --> 00:22:34,215
Para fazer upload do arquivo, como você notou,

290
00:22:34,215 --> 00:22:36,830
precisamos fazer upload desse arquivo no localhost: 3443,

291
00:22:36,830 --> 00:22:46,080
e o endpoint é ImageUpload.

292
00:22:47,680 --> 00:22:51,200
Para fazer o ImageUpload aqui

293
00:22:51,200 --> 00:22:57,360
, no cabeçalho, precisamos configurar a autorização.

294
00:22:57,490 --> 00:23:00,560
Então, vamos configurar a autorização,

295
00:23:00,560 --> 00:23:03,035
e então você vai dizer,

296
00:23:03,035 --> 00:23:08,820
“Portador”, e fornecer o token que obtivemos.

297
00:23:08,820 --> 00:23:14,785
Então, mantenha uma cópia do token em algum lugar e copie o token no cabeçalho.

298
00:23:14,785 --> 00:23:18,260
No corpo, para carregar um arquivo,

299
00:23:18,260 --> 00:23:20,030
vamos usar este formulário de dados.

300
00:23:20,030 --> 00:23:24,020
Então, isso é o que permite que você faça o multipart/form-data aqui.

301
00:23:24,020 --> 00:23:26,625
Então, quando você clica no formulário de dados,

302
00:23:26,625 --> 00:23:32,310
aqui você pode fornecer esse arquivo aqui que você queria carregar.

303
00:23:32,310 --> 00:23:36,040
Então, quando você clicar em uma nova chave aqui,

304
00:23:37,870 --> 00:23:43,040
use essa chave como ImageFile.

305
00:23:43,040 --> 00:23:52,695
Lembre-se de que quando configuramos o método post no site UploadRouter,

306
00:23:52,695 --> 00:23:56,515
especificamos dizendo upload único de um ImageFile.

307
00:23:56,515 --> 00:23:59,670
Então, essa é a mesma chave que você vai usar aqui.

308
00:23:59,670 --> 00:24:03,410
Então, quando você dá a chave,

309
00:24:03,410 --> 00:24:05,270
em seguida, a segunda parte,

310
00:24:05,270 --> 00:24:09,875
você vai definir isso de Texto para Arquivo aqui.

311
00:24:09,875 --> 00:24:15,595
Então, isso é o que permite que você especifique o arquivo como o valor para essa chave específica.

312
00:24:15,595 --> 00:24:20,045
Então, você verá este botão chegando dizendo, “Escolher arquivos”.

313
00:24:20,045 --> 00:24:25,505
Então, você pode abrir isso e, em seguida, selecionar um arquivo que você deseja carregar.

314
00:24:25,505 --> 00:24:30,060
Então, aqui, eu vou para o meu,

315
00:24:30,160 --> 00:24:37,470
Eu tenho um arquivo em uma de minhas pastas aqui.

316
00:24:37,470 --> 00:24:41,685
Então, eu só vou para as imagens de ativos,

317
00:24:41,685 --> 00:24:46,640
e então nós vamos apenas fazer o upload de um arquivo PNG a partir daqui.

318
00:24:46,640 --> 00:24:48,230
Então, você pode dizer,

319
00:24:48,230 --> 00:24:50,280
“Carregar o arquivo específico”.

320
00:24:50,280 --> 00:24:52,100
Então, como você se lembra,

321
00:24:52,100 --> 00:24:56,020
configuramos nosso servidor para aceitar apenas ImageFile.

322
00:24:56,020 --> 00:24:58,720
Então, diremos: “Carregue esse arquivo em particular.”

323
00:24:58,720 --> 00:25:03,050
Então, quando você clica no botão Enviar,

324
00:25:03,050 --> 00:25:04,940
então observe que no corpo,

325
00:25:04,940 --> 00:25:07,145
você tem que configurar isso com form-data.

326
00:25:07,145 --> 00:25:11,240
Então, o multipart/form-data e, em seguida, a chave é o ImageFile,

327
00:25:11,240 --> 00:25:15,440
e o valor é o arquivo que você acabou de selecionar

328
00:25:15,440 --> 00:25:17,575
e, em seguida, clique no botão Enviar.

329
00:25:17,575 --> 00:25:19,940
Então, quando você clicar no botão Enviar,

330
00:25:19,940 --> 00:25:23,670
o arquivo será carregado para o lado do servidor e,

331
00:25:23,670 --> 00:25:27,770
em seguida, o servidor responderá de volta com este objeto.

332
00:25:27,770 --> 00:25:29,770
Então, isso é o que está contido no

333
00:25:29,770 --> 00:25:34,820
objeto req.file que está lá no objeto de solicitação aqui.

334
00:25:34,820 --> 00:25:38,250
Então, esse arquivo req.file, como você vê, contém um nome de campo.

335
00:25:38,250 --> 00:25:39,590
Nome do campo é ImageFile.

336
00:25:39,590 --> 00:25:43,200
Então, note que este é exatamente o mesmo que este aqui.

337
00:25:43,200 --> 00:25:50,290
O originalname, então observe que a expressão originalname contém alberto.png,

338
00:25:50,290 --> 00:25:52,915
que é o arquivo que eu enviei.

339
00:25:52,915 --> 00:25:56,250
Agora você pode ver por que quando eu configurei

340
00:25:56,250 --> 00:26:00,905
o armazenamento e o nome do arquivo, eu defini file.originalname.

341
00:26:00,905 --> 00:26:03,515
Então, isso é o que vai ser usado lá.

342
00:26:03,515 --> 00:26:05,410
Você pode ver o tipo de codificação,

343
00:26:05,410 --> 00:26:08,745
e o tipo MIME, e o destino, em

344
00:26:08,745 --> 00:26:10,995
que pasta o arquivo foi colocado,

345
00:26:10,995 --> 00:26:13,060
e o caminho real do arquivo aqui,

346
00:26:13,060 --> 00:26:18,240
o caminho relativo da raiz da pasta do servidor aqui.

347
00:26:18,240 --> 00:26:23,555
Então, esse caminho indica onde o arquivo está acessível no lado do servidor.

348
00:26:23,555 --> 00:26:29,865
Então, se você estiver configurando os detalhes de um prato ou um líder, por exemplo,

349
00:26:29,865 --> 00:26:37,490
você simplesmente usaria a propriedade image do líder para images/alberto.png.

350
00:26:37,490 --> 00:26:40,390
Público não deve ser usado de qualquer maneira porque a pasta pública é

351
00:26:40,390 --> 00:26:43,420
aquela que está agindo como a pasta raiz para o nosso servidor.

352
00:26:43,420 --> 00:26:46,560
Então, você só precisa fornecer essas images.alberto.

353
00:26:46,560 --> 00:26:49,475
Então, a partir deste caminho que você obtém,

354
00:26:49,475 --> 00:26:52,685
uma vez que o arquivo é carregado com sucesso,

355
00:26:52,685 --> 00:26:58,130
extraia esta parte e, em seguida, use-a para a imagem em

356
00:26:58,130 --> 00:27:04,265
seu documento JSON que descreve o líder específico.

357
00:27:04,265 --> 00:27:09,260
Então, é assim que fazemos upload de um arquivo.

358
00:27:09,260 --> 00:27:11,985
Agora, para convencê-los de que a multa realmente foi carregada,

359
00:27:11,985 --> 00:27:14,375
vamos para o nosso projeto.

360
00:27:14,375 --> 00:27:16,655
Indo para o nosso projeto,

361
00:27:16,655 --> 00:27:22,215
na pasta pública,

362
00:27:22,215 --> 00:27:26,325
agora você pode ver que há uma subpasta de imagens lá.

363
00:27:26,325 --> 00:27:28,120
Na subpasta de imagens,

364
00:27:28,120 --> 00:27:32,785
você pode ver o arquivo alberta.png carregado lá.

365
00:27:32,785 --> 00:27:37,635
Agora, podemos carregar mais ImageFiles em nosso lado do servidor.

366
00:27:37,635 --> 00:27:40,425
Agora, se você tentar fazer upload de um não-ImageFile,

367
00:27:40,425 --> 00:27:42,980
você veria que o servidor não aceitará

368
00:27:42,980 --> 00:27:46,660
um não-ImageFile e, em seguida, responderá dizendo:

369
00:27:46,660 --> 00:27:49,180
“Não é possível aceitar o não-ImageFile”.

370
00:27:49,180 --> 00:27:54,050
Então, é assim que vamos configurar nosso servidor expresso

371
00:27:54,050 --> 00:27:59,390
para aceitar uploads de ImageFiles do lado do cliente.

372
00:27:59,390 --> 00:28:03,065
Com isso, completamos este exercício.

373
00:28:03,065 --> 00:28:05,400
Neste exercício, vimos como usamos

374
00:28:05,400 --> 00:28:09,840
o módulo meta para configurar nosso servidor express para

375
00:28:09,840 --> 00:28:17,735
aceitar uploads de arquivos em um endpoint /ImageUpload Rest API.

376
00:28:17,735 --> 00:28:19,840
Quando publicamos no endpoint,

377
00:28:19,840 --> 00:28:25,585
o arquivo é carregado para uma pasta especificada no site do servidor.

378
00:28:25,585 --> 00:28:27,900
Com isso, completamos este exercício.

379
00:28:27,900 --> 00:28:34,890
Este é um bom momento para você fazer um commit git com a mensagem 'upload de arquivo'.