1
00:00:01,090 --> 00:00:04,280
‫Jonas: Agora vamos configurar o Multer de acordo com as nossas necessidades.

2
00:00:04,280 --> 00:00:07,380
‫Primeiro dando às imagens um nome de arquivo melhor,

3
00:00:07,380 --> 00:00:09,990
‫depois permitindo que apenas os arquivos de imagem

4
00:00:09,990 --> 00:00:12,193
‫sejam carregados em nosso servidor.

5
00:00:13,880 --> 00:00:15,640
‫E para começar, vamos mover

6
00:00:15,640 --> 00:00:17,210
‫todas as coisas relacionadas

7
00:00:17,210 --> 00:00:19,563
‫ao Multer deste roteador para o controlador.

8
00:00:21,910 --> 00:00:23,633
‫Então vamos cortar

9
00:00:24,600 --> 00:00:27,220
‫isso aqui, e vou colocá-lo bem aqui

10
00:00:27,220 --> 00:00:30,570
‫no final, ou na verdade no topo, certo?

11
00:00:30,570 --> 00:00:32,710
‫Então, tudo relacionado a

12
00:00:32,710 --> 00:00:35,263
‫Multer, vamos colocar aqui no topo.

13
00:00:36,400 --> 00:00:41,400
‫Então, também precisamos, é claro, importar este pacote Multer.

14
00:00:44,940 --> 00:00:48,503
‫E agora também precisamos criar um middleware com isso.

15
00:00:53,970 --> 00:00:56,393
‫Portanto, as exportações. uploadUserPhoto será

16
00:01:01,540 --> 00:01:03,253
‫igual a isso.

17
00:01:05,176 --> 00:01:07,890
‫Tudo bem, então ainda temos uma função

18
00:01:07,890 --> 00:01:12,890
‫de middleware, mas agora ela tem seu próprio nome mais fácil de usar, certo?

19
00:01:13,950 --> 00:01:16,880
‫E aqui, userController. uploadPhoto, certo?

20
00:01:20,460 --> 00:01:22,200
‫Isso parece muito melhor e,

21
00:01:22,200 --> 00:01:23,610
‫claro, faz sentido

22
00:01:23,610 --> 00:01:25,950
‫que esse código esteja no controlador.

23
00:01:25,950 --> 00:01:28,010
‫E agora isso está bom

24
00:01:28,010 --> 00:01:30,790
‫e limpo, e podemos realmente fechá-lo agora.

25
00:01:30,790 --> 00:01:33,260
‫Ótimo, então agora vamos configurar

26
00:01:33,260 --> 00:01:36,400
‫nosso upload Multer de acordo com nossas necessidades.

27
00:01:36,400 --> 00:01:39,640
‫E para isso vamos criar um armazenamento Multer

28
00:01:39,640 --> 00:01:41,950
‫e um filtro Multer, certo?

29
00:01:41,950 --> 00:01:45,260
‫E então vamos usar esse armazenamento e

30
00:01:45,260 --> 00:01:49,513
‫o filtro para criar o upload a partir daí, certo?

31
00:01:50,400 --> 00:01:51,603
‫Então, vamos fazer isso aqui.

32
00:01:56,320 --> 00:02:01,053
‫Então, um multerStorage, usamos multer. diskStorage.

33
00:02:03,880 --> 00:02:05,760
‫Tudo bem, e também podemos

34
00:02:05,760 --> 00:02:08,560
‫escolher armazenar o arquivo na memória como um

35
00:02:08,560 --> 00:02:11,670
‫buffer, para que possamos usá-lo posteriormente por outros processos.

36
00:02:11,670 --> 00:02:14,050
‫E, na verdade, faremos isso um pouco

37
00:02:14,050 --> 00:02:16,700
‫mais tarde, mas por enquanto é claro que queremos

38
00:02:16,700 --> 00:02:20,120
‫realmente armazenar o arquivo como está em nosso sistema de arquivos, certo?

39
00:02:20,120 --> 00:02:23,690
‫Portanto, para o armazenamento em disco, tomaremos algumas opções, e

40
00:02:23,690 --> 00:02:25,693
‫a primeira é o destino.

41
00:02:27,900 --> 00:02:31,390
‫Mas agora não podemos simplesmente defini-lo neste caminho

42
00:02:31,390 --> 00:02:32,850
‫como fizemos antes.

43
00:02:32,850 --> 00:02:35,760
‫Não, isso é um pouco mais complexo, certo?

44
00:02:35,760 --> 00:02:39,550
‫E então, realmente este destino aqui é uma função de retorno

45
00:02:39,550 --> 00:02:41,400
‫de chamada que funciona assim.

46
00:02:41,400 --> 00:02:45,610
‫Portanto, essa função de retorno de chamada tem acesso à solicitação atual, ao

47
00:02:45,610 --> 00:02:47,750
‫arquivo carregado no momento e também a

48
00:02:47,750 --> 00:02:49,820
‫uma função de retorno de chamada.

49
00:02:49,820 --> 00:02:51,330
‫E essa função de retorno de

50
00:02:51,330 --> 00:02:53,720
‫chamada é um pouco como a próxima função no Express.

51
00:02:53,720 --> 00:02:56,810
‫Mas estou chamando de cb aqui, que significa callback,

52
00:02:56,810 --> 00:02:58,790
‫então é um nome diferente

53
00:02:58,790 --> 00:03:02,000
‫de next, porque na verdade não vem do Express, certo?

54
00:03:02,000 --> 00:03:05,070
‫Mas é semelhante porque podemos passar erros aqui e outras

55
00:03:05,070 --> 00:03:07,683
‫coisas, como você verá em um segundo.

56
00:03:10,830 --> 00:03:12,730
‫Portanto, agora para definir

57
00:03:12,730 --> 00:03:15,640
‫o destino, precisamos chamar esse retorno de chamada.

58
00:03:15,640 --> 00:03:18,730
‫Portanto, o retorno de chamada e o primeiro argumento é um

59
00:03:18,730 --> 00:03:19,820
‫erro, se houver.

60
00:03:19,820 --> 00:03:21,523
‫E se não, apenas nulo.

61
00:03:22,910 --> 00:03:25,943
‫E o segundo argumento é o destino real.

62
00:03:26,810 --> 00:03:28,260
‫Então, vamos copiar

63
00:03:29,180 --> 00:03:31,333
‫isso daqui e colá-lo aqui.

64
00:03:32,500 --> 00:03:37,500
‫Tudo bem, e novamente tudo parece um pouco estranho e complexo, e vamos realmente

65
00:03:37,820 --> 00:03:39,130
‫dar uma olhada

66
00:03:39,130 --> 00:03:41,433
‫na documentação do Multer no GitHub.

67
00:03:48,860 --> 00:03:50,970
‫Ok, então se você precisar

68
00:03:50,970 --> 00:03:54,570
‫aprender mais, você pode dar uma olhada nesta documentação aqui.

69
00:03:54,570 --> 00:03:56,890
‫E, como você pode

70
00:03:56,890 --> 00:04:01,890
‫ver, com 6.000 estrelas, é na verdade um pacote bastante popular.

71
00:04:02,090 --> 00:04:04,293
‫Então, aqui você pode aprender como usá-lo.

72
00:04:05,270 --> 00:04:07,090
‫Mas, na verdade, o que

73
00:04:07,090 --> 00:04:08,700
‫você vai encontrar aqui

74
00:04:08,700 --> 00:04:11,283
‫é o que faremos nas próximas aulas, certo?

75
00:04:12,290 --> 00:04:15,000
‫Parece muito mais confuso do que

76
00:04:15,000 --> 00:04:17,350
‫o que vamos fazer, certo?

77
00:04:17,350 --> 00:04:18,750
‫Mas você vê

78
00:04:18,750 --> 00:04:22,820
‫que isso é realmente o que estamos fazendo atualmente, então estamos definindo

79
00:04:22,820 --> 00:04:26,580
‫o destino e, a seguir, também definiremos o nome do arquivo.

80
00:04:26,580 --> 00:04:30,250
‫Então, vamos fazer isso, e novamente, se você quiser aprender

81
00:04:30,250 --> 00:04:33,400
‫mais, basta dar uma olhada nessa documentação.

82
00:04:33,400 --> 00:04:37,840
‫Mas, por enquanto, quero definir a propriedade do nome do arquivo.

83
00:04:37,840 --> 00:04:41,593
‫Então não é isso, simplesmente nome do arquivo.

84
00:04:42,610 --> 00:04:45,980
‫E, novamente, essa é uma função de retorno

85
00:04:45,980 --> 00:04:50,973
‫de chamada muito semelhante com uma assinatura, solicitação, arquivo e retorno de chamada semelhantes.

86
00:04:54,540 --> 00:04:57,980
‫E agora queremos dar aos nossos arquivos alguns nomes de arquivo exclusivos.

87
00:04:57,980 --> 00:04:59,380
‫E a maneira

88
00:04:59,380 --> 00:05:04,380
‫como vou fazer isso é chamá-los de user-userid- o carimbo de data / hora atual.

89
00:05:04,990 --> 00:05:07,720
‫Então algo assim: então usuário-,

90
00:05:07,720 --> 00:05:11,793
‫e então o ID que é estranho, algo assim.

91
00:05:14,190 --> 00:05:16,640
‫Certo, e então o carimbo de

92
00:05:16,640 --> 00:05:19,880
‫data / hora atual, que será um número enorme,

93
00:05:19,880 --> 00:05:23,490
‫algo como isso e, claro, a extensão do arquivo, certo?

94
00:05:23,490 --> 00:05:25,730
‫E com isso podemos garantir basicamente

95
00:05:25,730 --> 00:05:29,030
‫que não haverá duas imagens com o mesmo nome de arquivo.

96
00:05:29,030 --> 00:05:31,290
‫Se usássemos apenas o ID

97
00:05:31,290 --> 00:05:33,820
‫do usuário, é claro que vários uploads feitos

98
00:05:33,820 --> 00:05:36,140
‫pelo mesmo usuário substituiriam a imagem anterior.

99
00:05:36,140 --> 00:05:39,770
‫E se usássemos apenas usuário com o carimbo de data / hora,

100
00:05:39,770 --> 00:05:43,210
‫bem, se dois usuários estivessem enviando uma imagem ao mesmo tempo,

101
00:05:43,210 --> 00:05:45,920
‫eles obteriam exatamente o mesmo nome de arquivo, o

102
00:05:45,920 --> 00:05:47,393
‫que não faz sentido.

103
00:05:48,630 --> 00:05:51,300
‫Tudo bem, então antes de

104
00:05:51,300 --> 00:05:55,330
‫tudo, vamos extrair o nome do arquivo do arquivo enviado.

105
00:05:55,330 --> 00:05:57,060
‫E como vamos conseguir isso?

106
00:05:57,060 --> 00:05:59,963
‫Bem, vamos dar uma olhada na saída do nosso console

107
00:06:03,080 --> 00:06:06,120
‫aqui, onde tínhamos a solicitação. arquivo há muito tempo.

108
00:06:06,120 --> 00:06:09,080
‫Então aqui está, então lembre-se de que este objeto

109
00:06:09,080 --> 00:06:11,830
‫aqui foi pedido. arquivo, e isso

110
00:06:11,830 --> 00:06:15,530
‫é exatamente o que esse arquivo aqui é, ok?

111
00:06:15,530 --> 00:06:18,260
‫E aqui temos o tipo

112
00:06:18,260 --> 00:06:22,087
‫MIME, para que o JPEG seja armazenado aqui, certo?

113
00:06:22,087 --> 00:06:24,030
‫E é aqui que vamos obter

114
00:06:24,030 --> 00:06:25,363
‫a extensão do arquivo.

115
00:06:28,130 --> 00:06:33,130
‫Portanto, a extensão é igual ao arquivo. tipo MIME, e então

116
00:06:35,290 --> 00:06:39,550
‫vamos dividir essa string pela barra e pegar

117
00:06:39,550 --> 00:06:42,720
‫o segundo elemento do array resultante.

118
00:06:42,720 --> 00:06:46,853
‫E então essa será apenas esta parte, apenas esta.

119
00:06:47,780 --> 00:06:50,500
‫Tudo bem, então essa é a extensão.

120
00:06:50,500 --> 00:06:52,100
‫E agora, como antes,

121
00:06:52,100 --> 00:06:56,760
‫precisamos chamar a função de retorno de chamada sem erro e, em seguida,

122
00:06:56,760 --> 00:06:59,423
‫o nome do arquivo que desejamos especificar.

123
00:07:00,460 --> 00:07:05,460
‫Então, esse será o usuário-, então o ID do usuário, lembra?

124
00:07:06,890 --> 00:07:09,970
‫E então, como temos acesso ao pedido aqui, é

125
00:07:09,970 --> 00:07:13,913
‫muito simples, solicitar. do utilizador. Eu iria.

126
00:07:14,830 --> 00:07:16,620
‫E como você sabe, esse

127
00:07:16,620 --> 00:07:19,040
‫é o ID do usuário conectado no momento.

128
00:07:19,040 --> 00:07:24,040
‫Em seguida, o carimbo de data / hora, então Data. agora, ok, e então

129
00:07:25,547 --> 00:07:30,547
‫pontilhe a extensão que acabamos de criar, certo?

130
00:07:33,120 --> 00:07:35,410
‫Então, vamos nos livrar desse

131
00:07:35,410 --> 00:07:37,780
‫comentário, e esse é realmente nosso armazenamento.

132
00:07:37,780 --> 00:07:40,310
‫E então basicamente uma definição completa de como

133
00:07:40,310 --> 00:07:42,540
‫queremos armazenar nossos arquivos, com

134
00:07:42,540 --> 00:07:44,963
‫o destino e o nome do arquivo.

135
00:07:46,270 --> 00:07:48,833
‫A seguir, vamos criar um filtro Multer.

136
00:07:52,270 --> 00:07:53,983
‫Então, vamos chamá-lo exatamente assim.

137
00:07:57,200 --> 00:08:00,370
‫E o filtro no Multer é simplesmente, novamente,

138
00:08:00,370 --> 00:08:04,010
‫uma função de retorno de chamada, semelhante às que tínhamos

139
00:08:04,010 --> 00:08:08,433
‫antes, acessando a solicitação, o arquivo e uma função de retorno de chamada.

140
00:08:09,850 --> 00:08:11,730
‫E nesta função, o objetivo

141
00:08:11,730 --> 00:08:14,660
‫é basicamente testar se o arquivo enviado é uma imagem.

142
00:08:14,660 --> 00:08:17,220
‫E se for assim, passamos verdadeiro para a função

143
00:08:17,220 --> 00:08:19,010
‫de retorno de chamada e, se

144
00:08:19,010 --> 00:08:22,110
‫não for, passamos falso para a função de retorno de chamada,

145
00:08:22,110 --> 00:08:23,410
‫junto com um erro.

146
00:08:23,410 --> 00:08:25,810
‫Porque, novamente, não queremos permitir o upload

147
00:08:25,810 --> 00:08:28,020
‫de arquivos que não sejam imagens.

148
00:08:28,020 --> 00:08:31,370
‫E é exatamente para isso que serve esse filtro.

149
00:08:31,370 --> 00:08:33,090
‫Agora, se em seu próprio

150
00:08:33,090 --> 00:08:36,830
‫aplicativo você quiser fazer upload de outra coisa, digamos arquivos CSV, então

151
00:08:36,830 --> 00:08:40,260
‫é claro que você pode testar isso em vez de imagens.

152
00:08:40,260 --> 00:08:42,240
‫Portanto, tudo o que estamos fazendo aqui

153
00:08:42,240 --> 00:08:43,960
‫funciona não apenas para

154
00:08:43,960 --> 00:08:45,790
‫imagens, mas também para todos os

155
00:08:45,790 --> 00:08:48,090
‫tipos de arquivos que você deseja enviar, certo?

156
00:08:48,090 --> 00:08:51,610
‫Agora, novamente, neste caso, estamos realmente falando sobre imagens, então vamos

157
00:08:51,610 --> 00:08:54,640
‫testar se o arquivo enviado é uma imagem.

158
00:08:54,640 --> 00:08:58,410
‫E para isso usaremos mais uma vez o tipo

159
00:08:58,410 --> 00:09:00,770
‫MIME, porque qualquer tipo de

160
00:09:00,770 --> 00:09:05,300
‫imagem carregado, então não importa se é JPEG, ou PNG, ou

161
00:09:05,300 --> 00:09:07,730
‫bitmap, ou TIFF, ou realmente qualquer

162
00:09:07,730 --> 00:09:10,950
‫coisa, o tipo MIME sempre começará com imagem.

163
00:09:10,950 --> 00:09:13,170
‫E agora podemos testar isso.

164
00:09:13,170 --> 00:09:17,643
‫Portanto, se o arquivo. tipo MIME. startsWith, image e,

165
00:09:21,890 --> 00:09:25,910
‫portanto, não tenho certeza se já usamos esse antes, mas é

166
00:09:25,910 --> 00:09:29,700
‫um método de string relativamente novo e muito útil que

167
00:09:29,700 --> 00:09:31,750
‫está disponível em JavaScript, ou seja,

168
00:09:31,750 --> 00:09:33,593
‫em todo JavaScript em geral.

169
00:09:34,770 --> 00:09:38,650
‫Então caso tenhamos realmente uma imagem, bom, então novamente

170
00:09:38,650 --> 00:09:42,090
‫não há erro e passamos verdadeiro, como

171
00:09:42,090 --> 00:09:43,810
‫disse no início.

172
00:09:43,810 --> 00:09:48,810
‫Caso contrário, passaremos um erro e, em

173
00:09:50,520 --> 00:09:52,080
‫seguida, falso.

174
00:09:52,080 --> 00:09:55,320
‫Então, vamos colocar um x aqui, e falso.

175
00:09:55,320 --> 00:09:58,910
‫Portanto, para este x aqui, criaremos agora um AppError, assim como

176
00:09:58,910 --> 00:10:01,010
‫temos feito o tempo todo.

177
00:10:01,010 --> 00:10:03,423
‫E na verdade já temos isso aqui.

178
00:10:04,470 --> 00:10:07,643
‫Então, digamos

179
00:10:10,522 --> 00:10:14,896
‫que um novo AppError, não

180
00:10:14,896 --> 00:10:19,896
‫uma imagem, carregue apenas imagens, certo?

181
00:10:20,709 --> 00:10:23,459
‫E então 400 para um pedido incorreto.

182
00:10:24,876 --> 00:10:28,875
‫Ótimo, então temos nosso armazenamento, temos nosso filtro, agora

183
00:10:28,875 --> 00:10:30,567
‫é hora de

184
00:10:30,567 --> 00:10:33,294
‫realmente usá-los para criar o upload.

185
00:10:33,294 --> 00:10:37,228
‫Certo, o upload agora não será mais

186
00:10:37,228 --> 00:10:40,816
‫assim, mas passaremos essas variáveis.

187
00:10:40,816 --> 00:10:44,149
‫Portanto, no Multer podemos especificar o armazenamento, e

188
00:10:46,618 --> 00:10:49,368
‫esse é o nosso multerStorage.

189
00:10:52,118 --> 00:10:54,118
‫E então o

190
00:10:57,109 --> 00:11:01,276
‫fileFilter, que é a variável que chamamos de multerFilter.

191
00:11:02,439 --> 00:11:04,299
‫Ok, e é isso.

192
00:11:04,299 --> 00:11:06,486
‫E, claro, poderíamos ter colocado

193
00:11:06,486 --> 00:11:10,225
‫tudo isso aqui diretamente neste objeto de opções aqui.

194
00:11:10,225 --> 00:11:12,901
‫Mas geralmente prefiro fazer isso do lado de

195
00:11:12,901 --> 00:11:17,076
‫fora e, em seguida, simplesmente passar as variáveis para um objeto de opções.

196
00:11:17,076 --> 00:11:19,351
‫Então isso parece um pouco mais limpo.

197
00:11:19,351 --> 00:11:22,241
‫Portanto, esta é uma série de

198
00:11:22,241 --> 00:11:26,046
‫etapas que precisamos seguir para realmente criar nosso middleware Multer.

199
00:11:26,046 --> 00:11:27,953
‫Mas finalmente nós então é

200
00:11:27,953 --> 00:11:29,770
‫claro, assim como fizemos

201
00:11:29,770 --> 00:11:33,169
‫no último vídeo, usamos esse upload, e nisso chamamos de

202
00:11:33,169 --> 00:11:35,437
‫single, com o nome do campo.

203
00:11:35,437 --> 00:11:38,688
‫Então, foto e, a partir daí, criamos uma

204
00:11:38,688 --> 00:11:41,262
‫exportação, ou middleware, que já incluímos

205
00:11:41,262 --> 00:11:42,880
‫em nosso roteador.

206
00:11:42,880 --> 00:11:46,845
‫Então, vamos agora deletar esse tipo de imagem antigo

207
00:11:46,845 --> 00:11:48,845
‫que tínhamos aqui antes.

208
00:11:50,649 --> 00:11:52,399
‫Não, isso não funcionou.

209
00:11:54,543 --> 00:11:57,569
‫E agora vamos realmente testá-lo aqui novamente.

210
00:11:57,569 --> 00:12:00,637
‫Então, de volta ao Postman, ainda temos nosso nome aqui

211
00:12:00,637 --> 00:12:03,554
‫e a imagem de Leo, então vamos lá.

212
00:12:05,556 --> 00:12:08,473
‫E não tivemos nenhum erro, o que é bom.

213
00:12:10,516 --> 00:12:13,516
‫E vamos ver nossa saída aqui novamente.

214
00:12:16,428 --> 00:12:19,240
‫Portanto, tudo aqui no início é o

215
00:12:19,240 --> 00:12:23,827
‫mesmo, mas então você verá que nosso nome de arquivo agora está correto.

216
00:12:23,827 --> 00:12:26,465
‫E se você der uma olhada aqui na nossa

217
00:12:26,465 --> 00:12:28,948
‫pasta, então aí está a nossa imagem.

218
00:12:28,948 --> 00:12:31,934
‫E é exatamente isso que carregamos.

219
00:12:31,934 --> 00:12:34,934
‫Então isso está em dev-data, imagens, Leo.

220
00:12:37,649 --> 00:12:41,288
‫E, de fato, isso é exatamente o mesmo.

221
00:12:41,288 --> 00:12:43,724
‫Ótimo, isso é incrível.

222
00:12:43,724 --> 00:12:46,615
‫Agora, apenas para testar este filtro aqui

223
00:12:46,615 --> 00:12:51,615
‫também, vamos tentar fazer upload de algum outro arquivo que não seja uma imagem.

224
00:12:51,974 --> 00:12:56,516
‫Então, vamos selecionar outra coisa aqui de nossos dados

225
00:12:56,516 --> 00:13:00,278
‫dev, e digamos simplesmente alguns dados JSON.

226
00:13:00,278 --> 00:13:04,336
‫E então vamos esperar se ocorrer um erro aqui.

227
00:13:04,336 --> 00:13:06,190
‫E, de fato, temos um.

228
00:13:06,190 --> 00:13:09,070
‫Portanto, não é uma imagem, faça upload apenas de imagens.

229
00:13:09,070 --> 00:13:11,643
‫E isso significa que também funciona.

230
00:13:12,610 --> 00:13:16,200
‫Tão perfeito, toda a nossa configuração Multer agora funciona

231
00:13:16,200 --> 00:13:18,540
‫muito bem, mas é claro que

232
00:13:18,540 --> 00:13:20,480
‫ainda falta uma etapa.

233
00:13:20,480 --> 00:13:22,660
‫E isso é para realmente

234
00:13:22,660 --> 00:13:25,550
‫vincular o usuário à imagem recém-atualizada, certo?

235
00:13:25,550 --> 00:13:27,660
‫Porque agora, no banco de dados,

236
00:13:27,660 --> 00:13:29,420
‫obviamente ainda temos o

237
00:13:29,420 --> 00:13:31,840
‫caminho, ou na verdade o nome da

238
00:13:31,840 --> 00:13:34,460
‫imagem antiga, porque em nenhum lugar do nosso

239
00:13:34,460 --> 00:13:38,180
‫código especificamos que queríamos atualizar o próprio documento do usuário, certo?

240
00:13:38,180 --> 00:13:40,603
‫E então vamos corrigir isso no próximo vídeo.