1
00:00:01,290 --> 00:00:03,840
‫Palestrante: Vamos agora permitir que os

2
00:00:03,840 --> 00:00:07,883
‫usuários façam upload de suas fotos direto em nosso site.

3
00:00:09,610 --> 00:00:11,640
‫E é isso que queremos.

4
00:00:11,640 --> 00:00:13,760
‫Quando clicamos aqui, basicamente queremos abrir

5
00:00:13,760 --> 00:00:15,915
‫uma nova janela para a qual

6
00:00:15,915 --> 00:00:19,370
‫podemos selecionar uma nova imagem para fazer upload e, em seguida,

7
00:00:19,370 --> 00:00:21,380
‫quando clicamos neste botão e

8
00:00:21,380 --> 00:00:23,990
‫enviar um formulário, é claro, queremos fazer upload

9
00:00:23,990 --> 00:00:27,520
‫dessa imagem em nosso back-end e atualizar o usuário , direito.

10
00:00:27,520 --> 00:00:29,528
‫E assim, o primeiro passo para

11
00:00:29,528 --> 00:00:33,400
‫fazer isso será adicionar um novo elemento de entrada ao nosso html.

12
00:00:33,400 --> 00:00:35,490
‫Então, basicamente, para o nosso modelo de

13
00:00:35,490 --> 00:00:37,850
‫pacote, que permitirá que o seletor de arquivo

14
00:00:37,850 --> 00:00:39,503
‫seja aberto quando clicarmos aqui.

15
00:00:40,930 --> 00:00:43,800
‫Então, vamos para nossas visualizações e

16
00:00:43,800 --> 00:00:48,800
‫para a conta e, portanto, é neste formulário que agora

17
00:00:49,010 --> 00:00:51,720
‫temos que adicionar essa entrada.

18
00:00:51,720 --> 00:00:55,420
‫Então agora temos aquele link aqui que diz nova foto.

19
00:00:55,420 --> 00:00:58,800
‫Mas é claro, não é um link que vamos usar.

20
00:00:58,800 --> 00:01:01,280
‫Portanto, este foi realmente apenas um espaço reservado.

21
00:01:01,280 --> 00:01:03,360
‫E então vamos nos livrar disso.

22
00:01:03,360 --> 00:01:05,063
‫Então, o que precisamos é de uma entrada.

23
00:01:06,280 --> 00:01:07,803
‫Desligue para digitar o arquivo.

24
00:01:09,955 --> 00:01:13,110
‫Tudo bem, então antes, para o nome tivemos

25
00:01:13,110 --> 00:01:15,980
‫uma entrada com o tipo de texto.

26
00:01:15,980 --> 00:01:19,040
‫Também temos a entrada com o tipo

27
00:01:19,040 --> 00:01:22,925
‫de e-mail e também há um especial para senha.

28
00:01:22,925 --> 00:01:26,210
‫Portanto, insira a senha e os

29
00:01:26,210 --> 00:01:30,283
‫arquivos, é claro que há uma para os arquivos.

30
00:01:31,380 --> 00:01:35,263
‫Podemos então especificar que tipo de arquivo realmente aceitamos.

31
00:01:38,920 --> 00:01:40,950
‫E podemos fazer algo assim.

32
00:01:40,950 --> 00:01:43,410
‫Imagem e depois todos eles.

33
00:01:43,410 --> 00:01:46,210
‫Então, basicamente, todos os formatos obtêm suas imagens, então

34
00:01:46,210 --> 00:01:49,010
‫os que têm um tipo de mente começando

35
00:01:49,010 --> 00:01:50,823
‫com imagem são aceitos aqui.

36
00:01:53,054 --> 00:01:55,780
‫Agora, vamos também dar a isso aqui

37
00:01:55,780 --> 00:01:59,930
‫um nome de classe para que apareça bem formatado em nossa página.

38
00:01:59,930 --> 00:02:03,660
‫E esse é o nome da classe que tenho em meu css.

39
00:02:03,660 --> 00:02:06,940
‫E agora também dando a ele um ID para que possamos

40
00:02:06,940 --> 00:02:08,440
‫selecioná-lo em java script.

41
00:02:09,300 --> 00:02:12,690
‫Adicione isso como foto e, finalmente, como os outros

42
00:02:12,690 --> 00:02:15,840
‫campos, também damos um nome a ele.

43
00:02:15,840 --> 00:02:20,420
‫Então, o nome da foto também.

44
00:02:20,420 --> 00:02:23,093
‫E é claro que é foto porque esse é o

45
00:02:23,093 --> 00:02:25,680
‫nome que temos em nosso documento do usuário

46
00:02:25,680 --> 00:02:29,063
‫e também é o nome do campo que o multer está esperando.

47
00:02:30,106 --> 00:02:34,410
‫Então, aqui está o upload e também especificamos um rótulo

48
00:02:34,410 --> 00:02:35,483
‫para ele.

49
00:02:37,650 --> 00:02:40,293
‫E definimos como quatro e, em

50
00:02:40,293 --> 00:02:44,110
‫seguida, o ID do elemento de entrada, tudo bem.

51
00:02:44,110 --> 00:02:45,570
‫Não tenho certeza se você

52
00:02:45,570 --> 00:02:47,890
‫está familiarizado com a forma como isso funciona em

53
00:02:47,890 --> 00:02:49,640
‫html, mas também não é muito importante.

54
00:02:51,329 --> 00:02:53,600
‫Então, o que acontece é que, quando

55
00:02:53,600 --> 00:02:56,320
‫clicamos neste rótulo aqui, ele realmente ativa o elemento

56
00:02:56,320 --> 00:02:58,610
‫de entrada que tem o ID que

57
00:02:58,610 --> 00:03:00,500
‫especificamos aqui no formulário.

58
00:03:00,500 --> 00:03:03,870
‫E então, nesse caso, essa é a foto, tudo bem.

59
00:03:03,870 --> 00:03:05,343
‫E na verdade é

60
00:03:05,343 --> 00:03:09,403
‫esse rótulo aqui que fará com que o texto escolha a nova foto.

61
00:03:11,030 --> 00:03:12,950
‫E então, quando clicarmos no rótulo,

62
00:03:12,950 --> 00:03:14,597
‫ele ativará essa entrada

63
00:03:14,597 --> 00:03:16,830
‫que, por sua vez, abrirá a janela

64
00:03:16,830 --> 00:03:18,913
‫na qual podemos selecionar um arquivo.

65
00:03:20,060 --> 00:03:23,090
‫E isso é tudo que precisamos fazer para as contribuições aqui.

66
00:03:23,090 --> 00:03:26,290
‫Agora, como antes, existem duas maneiras possíveis de

67
00:03:26,290 --> 00:03:28,710
‫enviar esses dados para o servidor.

68
00:03:28,710 --> 00:03:31,480
‫Então, primeiro, sem a API, como fizemos em

69
00:03:31,480 --> 00:03:32,840
‫uma aula anterior.

70
00:03:32,840 --> 00:03:35,470
‫Já encontramos a ação que queremos realizar

71
00:03:35,470 --> 00:03:37,370
‫e também o método.

72
00:03:37,370 --> 00:03:38,760
‫E com isso os

73
00:03:38,760 --> 00:03:41,180
‫dados são enviados diretamente para o servidor.

74
00:03:41,180 --> 00:03:43,130
‫Agora, se quisermos enviar um

75
00:03:43,130 --> 00:03:45,440
‫arquivo usando este método, precisaremos especificar

76
00:03:45,440 --> 00:03:47,220
‫outra opção aqui.

77
00:03:47,220 --> 00:03:49,801
‫E esse é o tipo enc.

78
00:03:49,801 --> 00:03:54,520
‫Portanto, o tipo enc teria que ser dados de formulário com várias partes.

79
00:03:54,520 --> 00:03:59,520
‫Então, dados de formulário de barra com várias partes, tudo bem.

80
00:04:02,530 --> 00:04:06,090
‫E aqui novamente, temos esse nome com várias partes.

81
00:04:06,090 --> 00:04:07,948
‫E assim como dissemos antes,

82
00:04:07,948 --> 00:04:11,220
‫multi-part é sempre para enviar arquivos para o servidor.

83
00:04:11,220 --> 00:04:13,864
‫E, novamente, precisamos do middleware multer para

84
00:04:13,864 --> 00:04:17,164
‫lidar com esses dados de formulário com várias partes.

85
00:04:17,164 --> 00:04:20,650
‫E, na verdade, o nome multer vem de várias partes.

86
00:04:20,650 --> 00:04:23,317
‫Então mult, multer, ok.

87
00:04:23,317 --> 00:04:26,830
‫De qualquer forma, se quiséssemos enviar os dados sem

88
00:04:26,830 --> 00:04:29,320
‫uma API, sempre teríamos que especificar

89
00:04:29,320 --> 00:04:31,200
‫este tipo de enc.

90
00:04:31,200 --> 00:04:33,740
‫Caso contrário, o formulário simplesmente ignoraria o arquivo

91
00:04:33,740 --> 00:04:35,623
‫e não o enviaria, certo.

92
00:04:35,623 --> 00:04:38,370
‫Mas, como já sabemos, na

93
00:04:38,370 --> 00:04:41,780
‫verdade estamos usando com a API, certo.

94
00:04:41,780 --> 00:04:44,727
‫E então não precisamos especificar este

95
00:04:44,727 --> 00:04:48,630
‫tipo de enc, mas teremos que fazer isso programaticamente.

96
00:04:48,630 --> 00:04:51,382
‫E então vamos realmente fazer isso.

97
00:04:51,382 --> 00:04:54,180
‫Então, vamos agora enviar nossos dados, incluindo,

98
00:04:54,180 --> 00:04:56,920
‫é claro, a foto, fazendo uma

99
00:04:56,920 --> 00:04:59,970
‫chamada de API, como fizemos na última seção.

100
00:04:59,970 --> 00:05:04,100
‫E então precisamos abrir agora em nossa pasta pública e de

101
00:05:04,100 --> 00:05:08,973
‫seus js, abrimos o índice. js.

102
00:05:10,360 --> 00:05:13,560
‫E então é aqui para onde

103
00:05:13,560 --> 00:05:17,010
‫enviamos os dados para serem atualizados no servidor.

104
00:05:17,010 --> 00:05:19,260
‫Bem, não os estamos enviando

105
00:05:19,260 --> 00:05:21,960
‫aqui, mas os estamos selecionando no formulário e

106
00:05:21,960 --> 00:05:24,790
‫depois os passando para as configurações de atualização.

107
00:05:24,790 --> 00:05:27,260
‫Tudo bem, mas agora lembra como eu

108
00:05:27,260 --> 00:05:29,590
‫disse que precisávamos recriar programaticamente

109
00:05:29,590 --> 00:05:32,660
‫os dados de um formulário com várias partes?

110
00:05:32,660 --> 00:05:34,893
‫E então precisamos fazer assim.

111
00:05:42,020 --> 00:05:46,740
‫Vamos chamá-lo de formulário e, em seguida, novos dados de formulário.

112
00:05:48,580 --> 00:05:51,200
‫Tudo bem, e agora nesse

113
00:05:51,200 --> 00:05:53,883
‫formulário, precisamos continuar acrescentando novos dados.

114
00:05:53,883 --> 00:05:57,152
‫E basicamente um anexo para cada um dos

115
00:05:57,152 --> 00:05:59,143
‫dados que queremos enviar.

116
00:06:00,370 --> 00:06:04,400
‫Então, forma. acrescente e o primeiro é o nome.

117
00:06:04,400 --> 00:06:08,250
‫Portanto, especificamos o nome aqui e, em seguida, o valor do nome.

118
00:06:08,250 --> 00:06:11,000
‫E então é claro que é esse aqui.

119
00:06:11,000 --> 00:06:15,363
‫Então, vamos pegá-lo, colá-lo aqui e duplicá-lo.

120
00:06:16,870 --> 00:06:19,653
‫E o próximo é o e-mail, ok.

121
00:06:20,690 --> 00:06:24,580
‫Então, vamos nos livrar dessa entrada nas configurações de atualização.

122
00:06:24,580 --> 00:06:28,040
‫Em seguida, passamos o formulário, ok.

123
00:06:28,040 --> 00:06:30,560
‫E ou uma chamada de texto usando

124
00:06:30,560 --> 00:06:32,350
‫axios irá então realmente

125
00:06:32,350 --> 00:06:34,480
‫reconhecer esta forma aqui como um

126
00:06:34,480 --> 00:06:37,550
‫objeto e funcionará da mesma forma que antes, ok.

127
00:06:37,550 --> 00:06:39,900
‫Portanto, aqui nas configurações de atualização,

128
00:06:39,900 --> 00:06:42,178
‫onde passamos os dados,

129
00:06:42,178 --> 00:06:44,980
‫que são passados aqui para a solicitação

130
00:06:44,980 --> 00:06:47,543
‫do axios, não precisamos alterar nada.

131
00:06:49,090 --> 00:06:51,810
‫Tudo bem, isso é equivalente ao que tínhamos

132
00:06:51,810 --> 00:06:54,380
‫antes com nome e e-mail, mas agora é

133
00:06:54,380 --> 00:06:57,050
‫claro, vamos adicionar também a foto, que é

134
00:06:57,050 --> 00:06:59,380
‫a razão pela qual agora temos

135
00:06:59,380 --> 00:07:00,580
‫que fazer assim.

136
00:07:02,590 --> 00:07:07,590
‫Então, forma. acrescente novamente o nome que

137
00:07:07,650 --> 00:07:10,400
‫queremos dar, claro, foto e

138
00:07:12,093 --> 00:07:12,970
‫documento. getelementbyid

139
00:07:14,176 --> 00:07:17,860
‫que também é foto, mas agora não é. valor, mas em vez

140
00:07:20,530 --> 00:07:22,930
‫disso. arquivos, tudo bem.

141
00:07:22,930 --> 00:07:25,920
‫E esses arquivos

142
00:07:25,920 --> 00:07:28,170
‫estão realmente na matriz e, como

143
00:07:28,170 --> 00:07:30,260
‫há apenas um, precisamos selecionar o

144
00:07:30,260 --> 00:07:33,260
‫primeiro elemento na matriz e isso é zero.

145
00:07:33,260 --> 00:07:34,733
‫Tudo bem, e vamos

146
00:07:36,880 --> 00:07:40,810
‫realmente registrar este formulário no console apenas até darmos uma olhada rápida no

147
00:07:40,810 --> 00:07:42,340
‫que este formulário realmente é.

148
00:07:43,360 --> 00:07:45,870
‫Mas, em poucas palavras, como eu disse antes, basicamente

149
00:07:45,870 --> 00:07:48,280
‫recriamos esses dados de formulário com várias partes.

150
00:07:48,280 --> 00:07:52,480
‫E é por isso que é chamado de dados de formulário porque,

151
00:07:52,480 --> 00:07:55,200
‫bem, esses dados de formulário também estão

152
00:07:55,200 --> 00:07:58,640
‫aqui neste tipo de enc de várias partes, certo.

153
00:07:58,640 --> 00:08:02,173
‫Então, eu acho que é o suficiente para

154
00:08:03,750 --> 00:08:06,450
‫nós agora tentarmos fazer isso.

155
00:08:06,450 --> 00:08:08,670
‫Então como falei, nas configurações de atualização,

156
00:08:08,670 --> 00:08:10,860
‫não há nada que a gente precise

157
00:08:10,860 --> 00:08:13,030
‫mudar e também o endpoint

158
00:08:13,030 --> 00:08:15,320
‫update me onde estamos enviando essa ferramenta

159
00:08:15,320 --> 00:08:18,630
‫de solicitação então essa também já está funcionando e pronta

160
00:08:18,630 --> 00:08:21,040
‫para aceitar imagens e até mesmo redimensioná-las, certo.

161
00:08:21,040 --> 00:08:25,230
‫E então vamos prosseguir e tentar isso.

162
00:08:25,230 --> 00:08:28,319
‫E então vamos recarregar isso mais uma vez.

163
00:08:28,319 --> 00:08:32,050
‫E então vamos ver, e de

164
00:08:32,050 --> 00:08:36,031
‫fato agora obtemos nosso seletor de arquivos basicamente.

165
00:08:36,031 --> 00:08:38,450
‫Esta janela onde agora podemos selecionar

166
00:08:38,450 --> 00:08:40,550
‫o arquivo e o que

167
00:08:40,550 --> 00:08:42,370
‫farei é basicamente colocar

168
00:08:42,370 --> 00:08:45,620
‫de volta a imagem original que tínhamos desse usuário.

169
00:08:45,620 --> 00:08:47,730
‫Então isso está no desktop,

170
00:08:47,730 --> 00:08:52,513
‫natours, público, usuários de imagem, e era o usuário 11, então este.

171
00:08:54,060 --> 00:08:58,700
‫E agora está carregado.

172
00:08:58,700 --> 00:09:00,050
‫Abra, salve nas configurações e a atualização dos dados será bem-sucedida.

173
00:09:01,940 --> 00:09:06,940
‫Agora isso não se reflete aqui imediatamente.

174
00:09:07,780 --> 00:09:10,180
‫Nem aqui nem aqui,

175
00:09:10,180 --> 00:09:13,280
‫mas deveria assim que carregarmos esta página.

176
00:09:13,280 --> 00:09:15,393
‫E também poderíamos fazer isso

177
00:09:16,410 --> 00:09:19,540
‫com java script, mas na verdade é muito trabalhoso.

178
00:09:19,540 --> 00:09:21,620
‫Eu tentei fazer e

179
00:09:21,620 --> 00:09:23,740
‫consegui, mas depois pensei que era

180
00:09:23,740 --> 00:09:26,800
‫muito trabalhoso e não valia a pena implementá-lo aqui.

181
00:09:26,800 --> 00:09:29,630
‫De qualquer forma, apenas para testar se realmente

182
00:09:29,630 --> 00:09:32,040
‫funcionou, precisamos recarregar a página agora.

183
00:09:32,040 --> 00:09:34,320
‫E assim foi.

184
00:09:34,320 --> 00:09:35,840
‫Aqui está a nova imagem que acabamos de enviar.

185
00:09:35,840 --> 00:09:39,320
‫Tão bom.

186
00:09:39,320 --> 00:09:41,450
‫Vamos dar uma olhada na própria pasta.

187
00:09:41,450 --> 00:09:44,210
‫Se está realmente lá, também, e

188
00:09:44,210 --> 00:09:46,530
‫se foi transformado corretamente.

189
00:09:46,530 --> 00:09:48,810
‫Então essa é uma imagem.

190
00:09:48,810 --> 00:09:52,030
‫Vamos recarregar aqui.

191
00:09:52,030 --> 00:09:53,293
‫E agora não tenho certeza de qual é.

192
00:09:57,240 --> 00:09:59,663
‫Ah, exatamente.

193
00:10:00,890 --> 00:10:02,690
‫Então, 500 vezes 500

194
00:10:02,690 --> 00:10:07,200
‫e agora está completamente desfocado porque a imagem original era muito menor.

195
00:10:07,200 --> 00:10:10,440
‫Mas deixa pra lá, isso não importa de jeito nenhum.

196
00:10:10,440 --> 00:10:12,643
‫O que importa é que

197
00:10:13,910 --> 00:10:17,570
‫agora podemos fazer upload de fotos direto deste formulário.

198
00:10:17,570 --> 00:10:19,830
‫Eu quero que isso seja tudo

199
00:10:19,830 --> 00:10:22,480
‫para dar uma olhada em nosso console aqui

200
00:10:22,480 --> 00:10:27,480
‫nos dados do formulário que eu pensei que tínhamos registrado e não apareceu aqui

201
00:10:27,546 --> 00:10:29,530
‫porque já recarregamos a página.

202
00:10:29,530 --> 00:10:32,184
‫Mas de qualquer maneira, eu queria colocar a outra imagem de volta aqui.

203
00:10:32,184 --> 00:10:36,543
‫Então, aquele que realmente carregamos antes, que é

204
00:10:39,290 --> 00:10:41,820
‫dev-data, imagem e aarav.

205
00:10:41,820 --> 00:10:46,820
‫Tudo bem, dados atualizados com sucesso.

206
00:10:50,040 --> 00:10:53,340
‫Vamos rapidamente dar uma olhada em nossos dados de telefone aqui.

207
00:10:53,340 --> 00:10:56,760
‫Ah, mas acho que não podemos realmente ver o que temos aqui.

208
00:10:56,760 --> 00:11:00,173
‫Vamos ver.

209
00:11:01,100 --> 00:11:02,223
‫Nah, não podemos realmente ver o que temos.

210
00:11:04,045 --> 00:11:06,689
‫Ok, então eu nunca dei uma olhada nisso.

211
00:11:06,689 --> 00:11:09,160
‫E pensei que talvez pudéssemos ver as informações, mas

212
00:11:09,160 --> 00:11:10,110
‫deixa pra lá.

213
00:11:10,110 --> 00:11:12,850
‫O que importa é que realmente funcionou.

214
00:11:12,850 --> 00:11:16,170
‫Portanto, se recarregarmos agora, é claro que essa imagem

215
00:11:16,170 --> 00:11:18,191
‫antiga está de volta.

216
00:11:18,191 --> 00:11:21,940
‫Incrível, então, mais uma vez, este aplicativo está realmente começando

217
00:11:21,940 --> 00:11:25,000
‫a parecer um trabalho cada vez mais real.