1 00:00:01,140 --> 00:00:03,990 ‫Narrador: Agora que o recurso de upload de 2 00:00:03,990 --> 00:00:08,080 ‫fotos do usuário está concluído, vamos aprender como fazer upload de vários 3 00:00:08,080 --> 00:00:10,080 ‫arquivos ao mesmo tempo 4 00:00:10,080 --> 00:00:13,170 ‫e também como processar várias imagens ao mesmo tempo. 5 00:00:13,170 --> 00:00:15,430 ‫E então, nesta palestra e na 6 00:00:15,430 --> 00:00:18,713 ‫próxima, iremos enviar e processar as fotos da turnê. 7 00:00:20,770 --> 00:00:23,750 ‫E para começar, vamos realmente lembrar que tipo de 8 00:00:23,750 --> 00:00:28,070 ‫imagens queremos para nossos tours e também quantas, então devemos dar uma 9 00:00:28,070 --> 00:00:31,033 ‫olhada em nosso modelo de tour aqui. 10 00:00:32,450 --> 00:00:37,450 ‫E aqui temos a capa da imagem e essa é na verdade 11 00:00:38,050 --> 00:00:40,170 ‫apenas uma imagem e 12 00:00:40,170 --> 00:00:42,400 ‫também temos o campo da 13 00:00:42,400 --> 00:00:45,610 ‫imagem, que será uma matriz de imagens. 14 00:00:45,610 --> 00:00:48,390 ‫E normalmente devem ter pelo menos três imagens, porque 15 00:00:48,390 --> 00:00:51,000 ‫essa é a quantidade de imagens que temos na 16 00:00:51,000 --> 00:00:52,950 ‫página de detalhes do tour. 17 00:00:52,950 --> 00:00:53,810 ‫Direito? 18 00:00:53,810 --> 00:00:56,010 ‫Então, novamente, teremos a capa da 19 00:00:56,010 --> 00:00:58,290 ‫imagem e as imagens como um array. 20 00:00:58,290 --> 00:00:59,410 ‫Tudo bem. 21 00:00:59,410 --> 00:01:01,240 ‫Agora, a maneira 22 00:01:01,240 --> 00:01:04,080 ‫como faremos o upload e processaremos essas 23 00:01:04,080 --> 00:01:06,140 ‫imagens será muito semelhante ao 24 00:01:06,140 --> 00:01:09,620 ‫que fizemos com os usuários, então, vamos prosseguir para 25 00:01:09,620 --> 00:01:13,444 ‫o controlador do usuário e copiar pelo menos esta parte 26 00:01:13,444 --> 00:01:15,820 ‫inicial da configuração do multer. 27 00:01:15,820 --> 00:01:18,620 ‫Tudo bem, então pegue isso e, em 28 00:01:18,620 --> 00:01:21,883 ‫seguida, no controlador de tour, bem aqui no 29 00:01:23,130 --> 00:01:25,774 ‫topo, vamos colocá-lo bem aqui e 30 00:01:25,774 --> 00:01:29,293 ‫também vamos pegar o multer e os requisitos afiados. 31 00:01:33,410 --> 00:01:37,610 ‫Certo, ótimo. 32 00:01:37,610 --> 00:01:39,850 ‫E então, como antes, vamos 33 00:01:39,850 --> 00:01:42,750 ‫armazenar as imagens na memória, tudo bem, 34 00:01:42,750 --> 00:01:46,900 ‫e também só permitiremos que as imagens passem pelo nosso filtro. 35 00:01:46,900 --> 00:01:51,720 ‫Em outras palavras, queremos apenas fazer upload de imagens. 36 00:01:51,720 --> 00:01:52,553 ‫Tudo bem. 37 00:01:52,553 --> 00:01:54,670 ‫Então aqui nós criamos ou carregamos 38 00:01:54,670 --> 00:01:57,060 ‫exatamente da mesma maneira que antes, 39 00:01:57,060 --> 00:01:58,180 ‫e agora 40 00:01:58,180 --> 00:02:01,420 ‫vamos realmente criar o middleware a partir deste upload. 41 00:02:01,420 --> 00:02:02,780 ‫Tudo bem. 42 00:02:02,780 --> 00:02:07,780 ‫Portanto, exporte o tour de upload de pontos, as imagens e depois faça o upload. 43 00:02:12,540 --> 00:02:14,536 ‫E agora vem 44 00:02:14,536 --> 00:02:17,020 ‫a parte diferente, então algo 45 00:02:17,020 --> 00:02:19,650 ‫que será diferente do que fizemos 46 00:02:19,650 --> 00:02:24,380 ‫aqui no controlador de usuários porque carregamos um ponto único. 47 00:02:24,380 --> 00:02:25,213 ‫OK. 48 00:02:25,213 --> 00:02:28,110 ‫E isso porque tínhamos apenas um campo com 49 00:02:28,110 --> 00:02:30,000 ‫um arquivo que queríamos carregar 50 00:02:30,000 --> 00:02:32,930 ‫e então aqui está o nome desse campo. 51 00:02:32,930 --> 00:02:33,763 ‫Direito? 52 00:02:33,763 --> 00:02:36,150 ‫Mas agora temos vários arquivos e 53 00:02:36,150 --> 00:02:38,490 ‫em um deles temos uma 54 00:02:38,490 --> 00:02:40,920 ‫imagem e no outro temos três imagens. 55 00:02:40,920 --> 00:02:42,537 ‫Então, como podemos fazer isso? 56 00:02:42,537 --> 00:02:47,010 ‫Bem, vamos usar os campos de pontos de upload e, portanto, 57 00:02:47,010 --> 00:02:49,850 ‫o multer é perfeitamente capaz de lidar 58 00:02:49,850 --> 00:02:52,280 ‫com esse tipo de situação. 59 00:02:52,280 --> 00:02:54,570 ‫Então, aqui passamos um array e 60 00:02:54,570 --> 00:02:57,520 ‫cada um dos elementos é um objeto onde especificamos 61 00:02:57,520 --> 00:02:59,283 ‫o nome do campo. 62 00:03:01,020 --> 00:03:02,420 ‫E então o primeiro, 63 00:03:02,420 --> 00:03:07,420 ‫lembre-se, é a cobertura da imagem, e então dizemos que a contagem máxima é um. 64 00:03:09,920 --> 00:03:11,820 ‫E isso significa que 65 00:03:11,820 --> 00:03:14,220 ‫só podemos ter um campo chamado 66 00:03:14,220 --> 00:03:16,730 ‫cobertura de imagem, que então será processado. 67 00:03:16,730 --> 00:03:20,163 ‫Tudo bem, então vamos fazer o mesmo com nossas imagens, então esse 68 00:03:21,910 --> 00:03:24,210 ‫é o outro campo em nosso banco de 69 00:03:24,210 --> 00:03:26,300 ‫dados e aqui também o chamamos 70 00:03:27,400 --> 00:03:30,683 ‫de imagens e aqui vamos dizer que a contagem máxima é três. 71 00:03:31,950 --> 00:03:32,783 ‫Tudo bem. 72 00:03:34,440 --> 00:03:37,350 ‫E caso não tivéssemos a capa da imagem 73 00:03:37,350 --> 00:03:41,340 ‫e só tivesse um campo que aceita várias imagens ou 74 00:03:41,340 --> 00:03:43,870 ‫vários arquivos ao mesmo tempo, poderíamos 75 00:03:43,870 --> 00:03:45,483 ‫ter feito assim. 76 00:03:46,990 --> 00:03:51,910 ‫Então, usaríamos upload dot array, ok? 77 00:03:51,910 --> 00:03:53,460 ‫E então o nome 78 00:03:55,920 --> 00:04:00,730 ‫do campo e, basicamente, a contagem máxima aqui como um número como este. 79 00:04:00,730 --> 00:04:01,640 ‫Tudo bem? 80 00:04:01,640 --> 00:04:06,120 ‫Então, quando há apenas um, então é upload ponto único, digamos imagem, 81 00:04:09,520 --> 00:04:13,240 ‫quando há vários com o mesmo nome, então é upload 82 00:04:13,240 --> 00:04:16,330 ‫dot array e quando há basicamente uma mistura 83 00:04:16,330 --> 00:04:19,303 ‫deles, então é upload campos de pontos. 84 00:04:21,330 --> 00:04:22,750 ‫OK? 85 00:04:22,750 --> 00:04:25,300 ‫Agora, talvez isso pareça um 86 00:04:25,300 --> 00:04:28,320 ‫pouco complicado agora, então vamos, antes de prosseguirmos, 87 00:04:28,320 --> 00:04:31,630 ‫replicar esse tipo de consulta no Postman, certo? 88 00:04:31,630 --> 00:04:33,750 ‫E, na verdade, antes de fazermos isso, 89 00:04:33,750 --> 00:04:35,523 ‫precisamos criar uma nova turnê. 90 00:04:37,190 --> 00:04:39,280 ‫Tudo bem, e na verdade 91 00:04:39,280 --> 00:04:42,490 ‫farei isso aqui na bússola simplesmente duplicando um dos 92 00:04:42,490 --> 00:04:44,330 ‫passeios que já temos. 93 00:04:44,330 --> 00:04:46,623 ‫Então, digamos aqui, o Sea Explorer, 94 00:04:47,920 --> 00:04:49,680 ‫e agora estou duplicando-o. 95 00:04:49,680 --> 00:04:53,780 ‫E então aqui eu posso mudar o que quero que seja 96 00:04:53,780 --> 00:04:56,743 ‫diferente e este se chama The Mountain Biker, 97 00:04:59,270 --> 00:05:04,263 ‫digamos duração de cinco, tamanho máximo do grupo de dez, e então o que 98 00:05:05,190 --> 00:05:08,120 ‫realmente importa é me livrar da capa da 99 00:05:08,120 --> 00:05:12,840 ‫imagem, porque é isso que nós deseja atualizar mais tarde e também a 100 00:05:12,840 --> 00:05:14,453 ‫matriz de imagens. 101 00:05:15,640 --> 00:05:20,300 ‫Criado em também pode ir e claro 102 00:05:20,300 --> 00:05:25,300 ‫que precisamos mudar a lesma, então o mountain bike. 103 00:05:27,780 --> 00:05:28,710 ‫OK? 104 00:05:28,710 --> 00:05:30,390 ‫E por falar nisso, 105 00:05:30,390 --> 00:05:34,200 ‫precisávamos criar um novo passeio como este para que realmente tenhamos 106 00:05:34,200 --> 00:05:36,970 ‫os locais, o resumo e a descrição, e 107 00:05:36,970 --> 00:05:41,030 ‫tudo mais, para que o turista possa renderizar corretamente em nosso site. 108 00:05:41,030 --> 00:05:44,770 ‫Certo, vamos inseri-lo e deve 109 00:05:44,770 --> 00:05:49,270 ‫estar em algum lugar aqui no final, ok. 110 00:05:49,270 --> 00:05:54,270 ‫Então, vamos pegar o ID aqui e agora aqui 111 00:05:55,070 --> 00:05:59,020 ‫no Postman e depois atualizar o tour. 112 00:05:59,020 --> 00:06:02,960 ‫Então, passamos isso aqui e agora em nosso corpo, 113 00:06:02,960 --> 00:06:07,960 ‫vamos lembrar que precisamos mudar de dados brutos para dados de formulário. 114 00:06:08,104 --> 00:06:09,103 ‫OK? 115 00:06:11,490 --> 00:06:16,490 ‫Vamos fechar tudo isso aqui e também permitir o login aqui 116 00:06:17,090 --> 00:06:20,210 ‫como administrador, pois, caso contrário, atualizar o 117 00:06:20,210 --> 00:06:22,010 ‫tour não funcionará. 118 00:06:23,070 --> 00:06:28,070 ‫Então admin @ nators. io, tudo bem. 119 00:06:31,740 --> 00:06:35,508 ‫E agora vamos apenas recriar uma solicitação de corpo aqui 120 00:06:35,508 --> 00:06:38,210 ‫semelhante à que acabamos de especificar aqui. 121 00:06:38,210 --> 00:06:42,070 ‫Então, basicamente semelhante ao que nosso upload multer espera, então 122 00:06:42,070 --> 00:06:44,973 ‫uma capa de imagem e três imagens. 123 00:06:47,060 --> 00:06:52,060 ‫Então, capa da imagem, que é um arquivo, vamos selecioná-la. 124 00:06:55,670 --> 00:06:58,630 ‫E aqui temos essas novas fotos para 125 00:06:59,660 --> 00:07:02,050 ‫passeios e vamos usar esta 126 00:07:02,050 --> 00:07:05,837 ‫primeira aqui como imagem de capa e depois as 127 00:07:08,450 --> 00:07:12,290 ‫imagens, vamos colocá-las aqui para arquivar também, e depois 128 00:07:12,290 --> 00:07:14,543 ‫aqui as outras três. 129 00:07:16,420 --> 00:07:19,943 ‫E agora, como você pode ver, todos eles serão chamados de imagens. 130 00:07:26,440 --> 00:07:29,940 ‫Ok, e só podemos ter no máximo três, pelo 131 00:07:29,940 --> 00:07:32,070 ‫menos apenas três deles 132 00:07:32,070 --> 00:07:34,680 ‫vão ser processados por multer, certo? 133 00:07:37,620 --> 00:07:40,490 ‫E na verdade aqui você vê que 134 00:07:40,490 --> 00:07:43,380 ‫realmente precisamos redimensionar este porque em nosso site 135 00:07:43,380 --> 00:07:46,090 ‫todos eles aparecem neste formato paisagem e 136 00:07:46,090 --> 00:07:48,550 ‫não retrato como temos aqui. 137 00:07:48,550 --> 00:07:49,383 ‫Tudo bem? 138 00:07:49,383 --> 00:07:51,139 ‫E é por 139 00:07:51,139 --> 00:07:55,940 ‫isso que é necessário processar também essas imagens, certo? 140 00:07:55,940 --> 00:07:58,590 ‫E, claro, também podemos mudar outras 141 00:07:58,590 --> 00:08:03,563 ‫coisas aqui, então digamos que queremos mudar o preço para 9-9-7, certo? 142 00:08:05,610 --> 00:08:09,690 ‫Agora, não vou enviar esta solicitação ainda porque não 143 00:08:09,690 --> 00:08:12,500 ‫temos nenhuma lógica implementada para tratá-la 144 00:08:12,500 --> 00:08:15,280 ‫neste ponto, certo, porque não estamos 145 00:08:15,280 --> 00:08:17,260 ‫realmente enviando para o 146 00:08:17,260 --> 00:08:21,360 ‫sistema de arquivos, mas apenas salvando-a na memória . 147 00:08:21,360 --> 00:08:23,870 ‫E então, apenas para dar uma 148 00:08:23,870 --> 00:08:26,808 ‫olhada nelas, vamos criar nosso próximo middleware aqui, 149 00:08:26,808 --> 00:08:29,913 ‫que será o único a processar essas imagens. 150 00:08:31,250 --> 00:08:36,250 ‫Portanto, exporte imagens de tour com redimensionamento de ponto, solicitação, 151 00:08:42,810 --> 00:08:47,810 ‫resposta e próximo, e agora vamos registrá-los no console. 152 00:08:50,620 --> 00:08:53,840 ‫Tudo bem, e no caso de termos vários 153 00:08:53,840 --> 00:08:58,520 ‫arquivos, são na verdade arquivos de ponto solicitados, e não apenas arquivos. 154 00:08:58,520 --> 00:08:59,610 ‫Tudo bem? 155 00:08:59,610 --> 00:09:02,460 ‫Então, isso aqui basicamente produzirá 156 00:09:04,030 --> 00:09:07,870 ‫arquivo de ponto de solicitação, enquanto os campos e 157 00:09:07,870 --> 00:09:12,603 ‫a matriz produzirão arquivos de ponto de solicitação, portanto, o plural. 158 00:09:14,215 --> 00:09:16,420 ‫Tudo bem, então registre isso no 159 00:09:16,420 --> 00:09:19,690 ‫console e também vamos chamar o próximo aqui 160 00:09:19,690 --> 00:09:21,440 ‫para que possamos 161 00:09:21,440 --> 00:09:25,000 ‫realmente terminar mais tarde o ciclo de solicitação-resposta, ok. 162 00:09:25,000 --> 00:09:26,730 ‫Salve-o e agora tudo 163 00:09:26,730 --> 00:09:29,700 ‫o que precisamos fazer para realmente testar a solicitação 164 00:09:29,700 --> 00:09:32,790 ‫é adicionar esses dois novos middlewares ao gerenciador de rotas. 165 00:09:32,790 --> 00:09:37,130 ‫Tudo bem, então, roteiros de turismo e assim como os usuários, para mantê-lo 166 00:09:37,130 --> 00:09:39,600 ‫simples aqui, só permitiremos o upload de 167 00:09:39,600 --> 00:09:41,953 ‫imagens em uma atualização de tour. 168 00:09:43,360 --> 00:09:48,360 ‫Então, aqui é onde temos a solicitação de patch, certo, e já 169 00:09:49,280 --> 00:09:52,320 ‫temos um monte de middlewares, então 170 00:09:52,320 --> 00:09:56,180 ‫proteja, restrinja a administradores e guias, e agora vamos 171 00:09:56,180 --> 00:10:01,180 ‫adicionar também imagens do tour de ponto de upload do controlador de 172 00:10:03,160 --> 00:10:08,160 ‫tour e tour de redimensionamento de ponto do controlador de tour imagens. 173 00:10:08,360 --> 00:10:13,130 ‫Essa é uma pilha de middleware muito boa aqui, certo? 174 00:10:13,130 --> 00:10:16,000 ‫E acho que agora estamos prontos 175 00:10:16,000 --> 00:10:18,890 ‫para realmente testar a solicitação que criamos aqui. 176 00:10:18,890 --> 00:10:21,830 ‫E, de novo, é claro que não vai fazer nada, 177 00:10:21,830 --> 00:10:24,500 ‫não vai salvar essas imagens em lugar nenhum e 178 00:10:24,500 --> 00:10:26,780 ‫também não vai atualizar o banco 179 00:10:26,780 --> 00:10:30,453 ‫de dados, mas por enquanto queremos apenas ver o resultado no console. 180 00:10:31,370 --> 00:10:34,290 ‫Bem, deveria ter atualizado o preço, então 181 00:10:34,290 --> 00:10:37,010 ‫vamos dar uma olhada nisso. 182 00:10:37,010 --> 00:10:39,790 ‫Sim, então o preço agora 183 00:10:39,790 --> 00:10:43,200 ‫atualizado, mas novamente as imagens obviamente não, certo? 184 00:10:43,200 --> 00:10:46,810 ‫E agora nós os temos no console, então vamos 185 00:10:46,810 --> 00:10:49,843 ‫aumentar um pouco mais e aqui temos 186 00:10:49,843 --> 00:10:53,400 ‫a capa da imagem onde obtivemos o nome do 187 00:10:53,400 --> 00:10:56,520 ‫campo, o nome original e também o 188 00:10:56,520 --> 00:11:00,620 ‫tipo MIME, ok, então você vê o buffer aqui e, 189 00:11:00,620 --> 00:11:03,230 ‫portanto, esta é basicamente uma representação 190 00:11:03,230 --> 00:11:05,240 ‫da imagem na memória. 191 00:11:05,240 --> 00:11:06,810 ‫É importante notar aqui 192 00:11:06,810 --> 00:11:10,953 ‫que, na verdade, até a capa da imagem é um array, certo? 193 00:11:12,290 --> 00:11:13,590 ‫Então, quando vamos 194 00:11:13,590 --> 00:11:16,480 ‫recuperar a imagem da capa da imagem, 195 00:11:16,480 --> 00:11:19,660 ‫teremos que usar o primeiro elemento deste array. 196 00:11:19,660 --> 00:11:22,380 ‫E então nas imagens, aqui é óbvio que 197 00:11:22,380 --> 00:11:24,700 ‫temos um array e aqui 198 00:11:24,700 --> 00:11:28,080 ‫para cada uma das imagens temos um objeto como este. 199 00:11:28,080 --> 00:11:32,530 ‫Assim, com o nome original, faça o tour quatro, três e dois e, em seguida, 200 00:11:32,530 --> 00:11:34,363 ‫cada um deles como um buffer. 201 00:11:36,030 --> 00:11:40,860 ‫Tudo bem, então tudo está bem conectado e tudo o que 202 00:11:40,860 --> 00:11:45,353 ‫precisamos fazer agora é basicamente criar essas imagens de tour 203 00:11:46,290 --> 00:11:49,300 ‫de redimensionamento, porque é aqui que as 204 00:11:49,300 --> 00:11:51,290 ‫imagens serão processadas e também 205 00:11:51,290 --> 00:11:53,210 ‫salvas no disco. 206 00:11:53,210 --> 00:11:56,903 ‫Ok, então esse é o tópico da próxima aula.