1
00:00:01,170 --> 00:00:03,440
‫Narrador: Na primeira parte desta

2
00:00:03,440 --> 00:00:06,140
‫seção, aprenderemos tudo sobre como fazer upload

3
00:00:06,140 --> 00:00:09,660
‫de imagens com o pacote Multer e, neste vídeo em

4
00:00:09,660 --> 00:00:13,653
‫particular, começaremos a implementar uploads de imagens para fotos de usuários.

5
00:00:15,230 --> 00:00:18,900
‫Mas antes de começarmos, vamos fazer uma limpeza rápida

6
00:00:18,900 --> 00:00:22,450
‫aqui e nos livrar dessa saída constante de

7
00:00:22,450 --> 00:00:24,570
‫cookies que temos aqui.

8
00:00:24,570 --> 00:00:29,093
‫Então está em algum lugar aqui embaixo e é muito melhor.

9
00:00:30,430 --> 00:00:33,610
‫Agora vamos trabalhar no upload de fotos

10
00:00:33,610 --> 00:00:38,010
‫do usuário e vamos abrir aqui as rotas do usuário, tudo bem.

11
00:00:38,010 --> 00:00:41,310
‫Portanto, Multer é um middleware muito popular para lidar com

12
00:00:41,310 --> 00:00:45,510
‫dados de formulário com várias partes, que é um formulário de codificação usado

13
00:00:45,510 --> 00:00:48,540
‫para fazer upload de arquivos de um formulário.

14
00:00:48,540 --> 00:00:51,200
‫Portanto, lembre-se de como na última seção

15
00:00:51,200 --> 00:00:55,160
‫usamos um formulário codificado por URL para atualizar os dados do usuário

16
00:00:55,160 --> 00:00:58,570
‫e para isso também tivemos que incluir um middleware especial.

17
00:00:58,570 --> 00:01:01,000
‫Portanto, Multer é basicamente um middleware

18
00:01:01,000 --> 00:01:03,580
‫para dados de formulário com várias partes.

19
00:01:03,580 --> 00:01:05,770
‫E agora aqui está o que vamos fazer.

20
00:01:05,770 --> 00:01:08,460
‫Permitiremos que o usuário carregue uma foto

21
00:01:08,460 --> 00:01:11,064
‫na rota Atualize-me e, portanto, em

22
00:01:11,064 --> 00:01:14,430
‫vez de apenas poder atualizar o e-mail e a

23
00:01:14,430 --> 00:01:18,620
‫foto, os usuários também poderão fazer o upload de suas fotos.

24
00:01:18,620 --> 00:01:21,970
‫Então, mais uma vez, vamos começar instalando o

25
00:01:21,970 --> 00:01:25,330
‫pacote de que precisamos e, na verdade, vamos criar

26
00:01:25,330 --> 00:01:30,267
‫uma nova janela de terminal aqui para que o NPM instale o Multer.

27
00:01:32,586 --> 00:01:37,437
‫Tudo bem e aqui vemos que estamos no Multer 1. 4 1

28
00:01:38,420 --> 00:01:41,160
‫E então, novamente, caso você tenha algum problema

29
00:01:41,160 --> 00:01:43,490
‫com este pacote, certifique-se de instalar

30
00:01:43,490 --> 00:01:45,983
‫a mesma versão que estou usando aqui.

31
00:01:47,241 --> 00:01:48,074
‫Tudo bem.

32
00:01:49,150 --> 00:01:51,313
‫Então, vamos incluir isso aqui.

33
00:01:52,930 --> 00:01:57,070
‫Então, Multer, exige, Multer.

34
00:01:58,840 --> 00:02:03,040
‫Então, fácil e agora precisamos configurar um chamado

35
00:02:03,040 --> 00:02:05,780
‫upload Multer e então usá-lo.

36
00:02:05,780 --> 00:02:08,030
‫E vamos fazer isso aqui no

37
00:02:09,330 --> 00:02:14,330
‫início e vamos chamá-lo de Upload e chamar a função Multer que acabamos

38
00:02:16,380 --> 00:02:19,090
‫de incluir antes e, em seguida, passar

39
00:02:19,090 --> 00:02:21,160
‫um objeto para algumas opções.

40
00:02:21,160 --> 00:02:23,730
‫E, por enquanto, a única opção

41
00:02:23,730 --> 00:02:26,180
‫que vamos especificar é o

42
00:02:26,180 --> 00:02:31,180
‫destino e vou defini-lo como Público / imagem / usuários, tudo bem.

43
00:02:34,940 --> 00:02:36,870
‫E essa é exatamente a pasta

44
00:02:36,870 --> 00:02:38,780
‫onde queremos salvar todas as imagens

45
00:02:38,780 --> 00:02:40,570
‫que estão sendo carregadas.

46
00:02:40,570 --> 00:02:45,570
‫Então está aqui, Público, Imagem e Usuários, como todas as imagens de

47
00:02:45,740 --> 00:02:48,063
‫todos os usuários que já

48
00:02:48,063 --> 00:02:50,750
‫temos em nosso banco de dados.

49
00:02:50,750 --> 00:02:53,770
‫Certo e é claro que podemos configurar isso

50
00:02:53,770 --> 00:02:56,480
‫de uma forma muito mais complexa e

51
00:02:56,480 --> 00:02:58,670
‫faremos isso em nossa próxima

52
00:02:58,670 --> 00:03:02,190
‫aula, mas por agora eu realmente quero que você apenas

53
00:03:02,190 --> 00:03:04,697
‫introduza este pacote e, a propósito, poderíamos

54
00:03:04,697 --> 00:03:08,010
‫apenas ter chamado a função Multer sem nenhuma opção.

55
00:03:08,010 --> 00:03:10,940
‫Portanto, sem isso aqui e depois, a imagem carregada seria

56
00:03:10,940 --> 00:03:13,749
‫simplesmente armazenada na memória e não salva em

57
00:03:13,749 --> 00:03:17,590
‫nenhum lugar no disco, mas é claro que neste ponto não é o

58
00:03:17,590 --> 00:03:21,290
‫que queremos e, portanto, pelo menos precisamos especificar esta opção de destino.

59
00:03:21,290 --> 00:03:23,620
‫E com isso, nosso arquivo é realmente

60
00:03:23,620 --> 00:03:26,450
‫carregado em um diretório em nosso sistema de arquivos.

61
00:03:26,450 --> 00:03:29,080
‫E eu mencionei isso antes, mas vamos

62
00:03:29,080 --> 00:03:31,960
‫ter certeza de que estamos na mesma página sobre

63
00:03:31,960 --> 00:03:34,870
‫isso, que é claro que as imagens não são carregadas

64
00:03:34,870 --> 00:03:37,770
‫diretamente no banco de dados, apenas fazemos upload delas

65
00:03:37,770 --> 00:03:40,700
‫em nosso sistema de arquivos e, em seguida, no banco

66
00:03:40,700 --> 00:03:43,510
‫de dados coloque um link basicamente para essa imagem.

67
00:03:43,510 --> 00:03:46,170
‫Portanto, neste caso, em cada documento do

68
00:03:46,170 --> 00:03:49,450
‫usuário, teremos que nomear todos os arquivos carregados, ok.

69
00:03:49,450 --> 00:03:51,690
‫Agora, novamente, não faremos isso neste vídeo, mas

70
00:03:51,690 --> 00:03:53,550
‫faremos um pouco mais tarde.

71
00:03:53,550 --> 00:03:55,603
‫Por enquanto, vamos apenas fazer isso funcionar.

72
00:03:56,490 --> 00:03:59,000
‫De qualquer forma, o que precisamos fazer

73
00:03:59,000 --> 00:04:02,150
‫agora é usar este upload aqui para realmente criar uma

74
00:04:02,150 --> 00:04:05,223
‫função de middleware que possamos colocar aqui na rota Atualizar-me.

75
00:04:06,100 --> 00:04:09,343
‫Então aqui, e funciona assim.

76
00:04:10,700 --> 00:04:14,670
‫Então carregue, ponto único, e é único porque aqui queremos apenas

77
00:04:14,670 --> 00:04:17,810
‫atualizar uma única imagem e aqui em single

78
00:04:17,810 --> 00:04:20,830
‫passamos o nome do campo que vai

79
00:04:20,830 --> 00:04:22,993
‫conter a imagem para upload.

80
00:04:24,000 --> 00:04:26,480
‫E então essa será a foto, ok.

81
00:04:26,480 --> 00:04:29,023
‫E com campo quero dizer o campo

82
00:04:29,023 --> 00:04:31,620
‫do formulário que vai fazer o upload da imagem.

83
00:04:31,620 --> 00:04:34,400
‫Tudo bem, faz sentido?

84
00:04:34,400 --> 00:04:38,040
‫Novamente, incluímos o pacote Multer e,

85
00:04:38,040 --> 00:04:41,560
‫com isso, criamos um upload.

86
00:04:41,560 --> 00:04:44,700
‫E este upload é apenas para definir algumas

87
00:04:44,700 --> 00:04:48,640
‫configurações onde neste exemplo nós apenas definimos o destino, então usamos

88
00:04:48,640 --> 00:04:52,260
‫esse upload para criar um novo middleware que podemos

89
00:04:52,260 --> 00:04:55,560
‫adicionar a esta pilha da rota que queremos usar

90
00:04:55,560 --> 00:04:58,400
‫para fazer upload do arquivo .

91
00:04:58,400 --> 00:05:01,130
‫Então, para isso, dizemos upload ponto single

92
00:05:01,130 --> 00:05:03,390
‫porque temos apenas um único

93
00:05:03,390 --> 00:05:06,160
‫arquivo e, finalmente, especificamos o nome do

94
00:05:06,160 --> 00:05:08,570
‫campo que vai conter este arquivo.

95
00:05:08,570 --> 00:05:11,600
‫Ok, então este middleware irá se encarregar

96
00:05:11,600 --> 00:05:14,610
‫de pegar o arquivo e basicamente copiá-lo

97
00:05:14,610 --> 00:05:16,960
‫para o destino que especificamos.

98
00:05:16,960 --> 00:05:19,040
‫E depois disso, é claro, ele

99
00:05:19,040 --> 00:05:22,083
‫chamará o próximo middleware na pilha, que é Atualizar-me.

100
00:05:23,210 --> 00:05:26,470
‫Além disso, este middleware aqui colocará o arquivo ou

101
00:05:26,470 --> 00:05:28,600
‫pelo menos algumas informações sobre

102
00:05:28,600 --> 00:05:30,810
‫o arquivo no objeto de solicitação

103
00:05:30,810 --> 00:05:33,080
‫e, portanto, vamos dar uma olhada nisso.

104
00:05:33,080 --> 00:05:36,123
‫Então, vamos para a função Atualizar-me.

105
00:05:38,490 --> 00:05:42,320
‫Então, bem aqui e bem aqui no

106
00:05:43,300 --> 00:05:48,163
‫início, digamos log de ponto de console, arquivo de ponto reg.

107
00:05:49,630 --> 00:05:50,463
‫Tudo bem?

108
00:05:51,410 --> 00:05:55,430
‫E também quero dar uma olhada no corpo.

109
00:05:55,430 --> 00:05:58,307
‫Ótimo e com isso agora estamos realmente

110
00:05:58,307 --> 00:06:02,320
‫prontos para testar isso e por enquanto iremos testá-lo no

111
00:06:02,320 --> 00:06:04,820
‫carteiro, mas é claro que

112
00:06:04,820 --> 00:06:08,253
‫mais tarde também adicionaremos essa funcionalidade ao formulário, certo.

113
00:06:09,220 --> 00:06:13,720
‫Então, vamos ao carteiro aqui e me atualize.

114
00:06:13,720 --> 00:06:16,023
‫Então, basicamente, para atualizar o usuário atual.

115
00:06:17,380 --> 00:06:20,430
‫E o usuário que quero atualizar se chama Leo,

116
00:06:20,430 --> 00:06:23,700
‫então vamos buscá-lo aqui do Compass, ou na verdade acho

117
00:06:23,700 --> 00:06:26,710
‫que nem é necessário porque no nosso login

118
00:06:26,710 --> 00:06:30,460
‫já temos esse tipo de endereço de e-mail e o e-mail

119
00:06:30,460 --> 00:06:35,010
‫dele é leo @ exemplo. com e a

120
00:06:35,010 --> 00:06:38,090
‫senha é sempre a mesma.

121
00:06:38,090 --> 00:06:41,390
‫E então, é claro, primeiro precisamos fazer o login como o

122
00:06:41,390 --> 00:06:44,653
‫usuário e agora vamos prosseguir e atualizar para o usuário.

123
00:06:46,620 --> 00:06:50,010
‫Portanto, no corpo temos o nome e a função.

124
00:06:50,010 --> 00:06:53,593
‫Então, vamos apenas atualizar, digamos o nome aqui.

125
00:06:54,560 --> 00:06:59,500
‫Portanto, o nome atual é Leo Gillespie ou Gillespie, não tenho certeza de

126
00:06:59,500 --> 00:07:01,113
‫como dizer isso.

127
00:07:02,800 --> 00:07:07,800
‫Vamos apenas adicionar algo aqui no meio, ok.

128
00:07:07,870 --> 00:07:11,283
‫E agora, finalmente, especificamos a propriedade da foto ou,

129
00:07:13,270 --> 00:07:16,370
‫na verdade, não deveríamos fazer assim, mas em

130
00:07:16,370 --> 00:07:21,100
‫vez disso, devemos ir aqui para os dados do formulário, certo, porque é

131
00:07:21,100 --> 00:07:22,810
‫assim que podemos

132
00:07:22,810 --> 00:07:25,543
‫enviar dados de formulário com várias partes.

133
00:07:26,410 --> 00:07:31,410
‫Então, vamos copiar apenas o nome aqui e seu Nome.

134
00:07:33,470 --> 00:07:37,813
‫Tudo bem, então aqui a chave é Nome

135
00:07:37,813 --> 00:07:40,763
‫e o valor é este.

136
00:07:42,350 --> 00:07:46,770
‫Em seguida, finalmente especificamos o campo da foto e

137
00:07:46,770 --> 00:07:50,210
‫aqui podemos realmente especificar o que queremos.

138
00:07:50,210 --> 00:07:52,700
‫E assim, em vez de texto, que

139
00:07:52,700 --> 00:07:56,520
‫é o padrão, podemos especificar o arquivo e, então, podemos selecionar o

140
00:07:56,520 --> 00:07:58,163
‫arquivo que queremos enviar.

141
00:07:59,240 --> 00:08:04,240
‫Então esse arquivo, essa imagem, está aqui em nossos dados de definição novamente, depois

142
00:08:04,350 --> 00:08:07,470
‫em imagem e aqui a imagem de Leo.

143
00:08:07,470 --> 00:08:10,430
‫E é por isso que mostra este usuário.

144
00:08:10,430 --> 00:08:13,800
‫Ok, então clique em abrir e agora acho que

145
00:08:13,800 --> 00:08:16,193
‫estamos prontos para enviar essa solicitação.

146
00:08:17,960 --> 00:08:22,200
‫Tudo bem, tivemos sucesso e claro, como eu disse antes, a foto obviamente

147
00:08:22,200 --> 00:08:25,880
‫não foi atualizada aqui na saída do banco de dados porque

148
00:08:25,880 --> 00:08:28,450
‫isso é para a próxima aula.

149
00:08:28,450 --> 00:08:31,630
‫Por enquanto, queremos apenas fazer o upload desta imagem

150
00:08:31,630 --> 00:08:33,803
‫para a pasta que especificamos.

151
00:08:34,960 --> 00:08:39,180
‫Tudo bem, agora vamos também dar uma olhada aqui em nossa saída e

152
00:08:39,180 --> 00:08:43,430
‫aqui temos o arquivo de ponto de solicitação, que é este, e assim

153
00:08:43,430 --> 00:08:46,460
‫obteremos todos os tipos de informações sobre ele.

154
00:08:46,460 --> 00:08:50,910
‫Portanto, o nome original, é o destino que especificamos, o novo

155
00:08:50,910 --> 00:08:54,370
‫nome do arquivo aqui e também o tamanho.

156
00:08:54,370 --> 00:08:57,980
‫Ok, então esse é o arquivo de ponto de solicitação e lembre-se

157
00:08:57,980 --> 00:08:59,920
‫de que também registramos o corpo.

158
00:08:59,920 --> 00:09:03,810
‫E então o corpo agora é apenas o nome, certo.

159
00:09:03,810 --> 00:09:07,100
‫Portanto, nosso body parse não é realmente capaz de lidar com

160
00:09:07,100 --> 00:09:09,470
‫arquivos e é por isso que o arquivo

161
00:09:09,470 --> 00:09:11,790
‫não está aparecendo no corpo e,

162
00:09:11,790 --> 00:09:15,920
‫claro, esse é o único motivo pelo qual realmente precisamos do pacote Multer.

163
00:09:15,920 --> 00:09:19,570
‫De qualquer forma, vamos agora dar uma olhada em nossa

164
00:09:19,570 --> 00:09:24,241
‫pasta e aqui temos imagens, usuários, e em algum lugar aqui deve estar

165
00:09:24,241 --> 00:09:26,890
‫a imagem que acabamos de enviar, mas

166
00:09:28,150 --> 00:09:30,160
‫não consigo realmente vê-la aqui.

167
00:09:30,160 --> 00:09:33,313
‫Vamos atualizar, ah e de fato aqui está.

168
00:09:34,960 --> 00:09:37,890
‫Então, se clicarmos agora, não poderemos realmente ver

169
00:09:37,890 --> 00:09:39,840
‫porque, como você pode

170
00:09:39,840 --> 00:09:42,600
‫ver aqui, nem mesmo tem uma extensão, ok.

171
00:09:42,600 --> 00:09:46,240
‫E é por isso que não podemos realmente abri-lo neste momento.

172
00:09:46,240 --> 00:09:49,690
‫Então o arquivo realmente apareceu aqui em nossa pasta

173
00:09:49,690 --> 00:09:52,320
‫e então temos o upload funcionando.

174
00:09:52,320 --> 00:09:54,870
‫Bem, pelo menos mais ou menos, mas

175
00:09:54,870 --> 00:09:57,350
‫não estamos realmente onde queremos, certo.

176
00:09:57,350 --> 00:09:59,960
‫Portanto, queremos dar a ele um nome de

177
00:09:59,960 --> 00:10:02,100
‫arquivo melhor e também reorganizar

178
00:10:02,100 --> 00:10:04,690
‫um pouco esse código que temos neste ponto.

179
00:10:04,690 --> 00:10:07,123
‫E então vamos fazer isso no próximo vídeo.