‫Narrador: Agora que o recurso de upload de
‫fotos do usuário está concluído, vamos aprender como fazer upload de vários
‫arquivos ao mesmo tempo
‫e também como processar várias imagens ao mesmo tempo.
‫E então, nesta palestra e na
‫próxima, iremos enviar e processar as fotos da turnê.
‫E para começar, vamos realmente lembrar que tipo de
‫imagens queremos para nossos tours e também quantas, então devemos dar uma
‫olhada em nosso modelo de tour aqui.
‫E aqui temos a capa da imagem e essa é na verdade
‫apenas uma imagem e
‫também temos o campo da
‫imagem, que será uma matriz de imagens.
‫E normalmente devem ter pelo menos três imagens, porque
‫essa é a quantidade de imagens que temos na
‫página de detalhes do tour.
‫Direito?
‫Então, novamente, teremos a capa da
‫imagem e as imagens como um array.
‫Tudo bem.
‫Agora, a maneira
‫como faremos o upload e processaremos essas
‫imagens será muito semelhante ao
‫que fizemos com os usuários, então, vamos prosseguir para
‫o controlador do usuário e copiar pelo menos esta parte
‫inicial da configuração do multer.
‫Tudo bem, então pegue isso e, em
‫seguida, no controlador de tour, bem aqui no
‫topo, vamos colocá-lo bem aqui e
‫também vamos pegar o multer e os requisitos afiados.
‫Certo, ótimo.
‫E então, como antes, vamos
‫armazenar as imagens na memória, tudo bem,
‫e também só permitiremos que as imagens passem pelo nosso filtro.
‫Em outras palavras, queremos apenas fazer upload de imagens.
‫Tudo bem.
‫Então aqui nós criamos ou carregamos
‫exatamente da mesma maneira que antes,
‫e agora
‫vamos realmente criar o middleware a partir deste upload.
‫Tudo bem.
‫Portanto, exporte o tour de upload de pontos, as imagens e depois faça o upload.
‫E agora vem
‫a parte diferente, então algo
‫que será diferente do que fizemos
‫aqui no controlador de usuários porque carregamos um ponto único.
‫OK.
‫E isso porque tínhamos apenas um campo com
‫um arquivo que queríamos carregar
‫e então aqui está o nome desse campo.
‫Direito?
‫Mas agora temos vários arquivos e
‫em um deles temos uma
‫imagem e no outro temos três imagens.
‫Então, como podemos fazer isso?
‫Bem, vamos usar os campos de pontos de upload e, portanto,
‫o multer é perfeitamente capaz de lidar
‫com esse tipo de situação.
‫Então, aqui passamos um array e
‫cada um dos elementos é um objeto onde especificamos
‫o nome do campo.
‫E então o primeiro,
‫lembre-se, é a cobertura da imagem, e então dizemos que a contagem máxima é um.
‫E isso significa que
‫só podemos ter um campo chamado
‫cobertura de imagem, que então será processado.
‫Tudo bem, então vamos fazer o mesmo com nossas imagens, então esse
‫é o outro campo em nosso banco de
‫dados e aqui também o chamamos
‫de imagens e aqui vamos dizer que a contagem máxima é três.
‫Tudo bem.
‫E caso não tivéssemos a capa da imagem
‫e só tivesse um campo que aceita várias imagens ou
‫vários arquivos ao mesmo tempo, poderíamos
‫ter feito assim.
‫Então, usaríamos upload dot array, ok?
‫E então o nome
‫do campo e, basicamente, a contagem máxima aqui como um número como este.
‫Tudo bem?
‫Então, quando há apenas um, então é upload ponto único, digamos imagem,
‫quando há vários com o mesmo nome, então é upload
‫dot array e quando há basicamente uma mistura
‫deles, então é upload campos de pontos.
‫OK?
‫Agora, talvez isso pareça um
‫pouco complicado agora, então vamos, antes de prosseguirmos,
‫replicar esse tipo de consulta no Postman, certo?
‫E, na verdade, antes de fazermos isso,
‫precisamos criar uma nova turnê.
‫Tudo bem, e na verdade
‫farei isso aqui na bússola simplesmente duplicando um dos
‫passeios que já temos.
‫Então, digamos aqui, o Sea Explorer,
‫e agora estou duplicando-o.
‫E então aqui eu posso mudar o que quero que seja
‫diferente e este se chama The Mountain Biker,
‫digamos duração de cinco, tamanho máximo do grupo de dez, e então o que
‫realmente importa é me livrar da capa da
‫imagem, porque é isso que nós deseja atualizar mais tarde e também a
‫matriz de imagens.
‫Criado em também pode ir e claro
‫que precisamos mudar a lesma, então o mountain bike.
‫OK?
‫E por falar nisso,
‫precisávamos criar um novo passeio como este para que realmente tenhamos
‫os locais, o resumo e a descrição, e
‫tudo mais, para que o turista possa renderizar corretamente em nosso site.
‫Certo, vamos inseri-lo e deve
‫estar em algum lugar aqui no final, ok.
‫Então, vamos pegar o ID aqui e agora aqui
‫no Postman e depois atualizar o tour.
‫Então, passamos isso aqui e agora em nosso corpo,
‫vamos lembrar que precisamos mudar de dados brutos para dados de formulário.
‫OK?
‫Vamos fechar tudo isso aqui e também permitir o login aqui
‫como administrador, pois, caso contrário, atualizar o
‫tour não funcionará.
‫Então admin @ nators. io, tudo bem.
‫E agora vamos apenas recriar uma solicitação de corpo aqui
‫semelhante à que acabamos de especificar aqui.
‫Então, basicamente semelhante ao que nosso upload multer espera, então
‫uma capa de imagem e três imagens.
‫Então, capa da imagem, que é um arquivo, vamos selecioná-la.
‫E aqui temos essas novas fotos para
‫passeios e vamos usar esta
‫primeira aqui como imagem de capa e depois as
‫imagens, vamos colocá-las aqui para arquivar também, e depois
‫aqui as outras três.
‫E agora, como você pode ver, todos eles serão chamados de imagens.
‫Ok, e só podemos ter no máximo três, pelo
‫menos apenas três deles
‫vão ser processados por multer, certo?
‫E na verdade aqui você vê que
‫realmente precisamos redimensionar este porque em nosso site
‫todos eles aparecem neste formato paisagem e
‫não retrato como temos aqui.
‫Tudo bem?
‫E é por
‫isso que é necessário processar também essas imagens, certo?
‫E, claro, também podemos mudar outras
‫coisas aqui, então digamos que queremos mudar o preço para 9-9-7, certo?
‫Agora, não vou enviar esta solicitação ainda porque não
‫temos nenhuma lógica implementada para tratá-la
‫neste ponto, certo, porque não estamos
‫realmente enviando para o
‫sistema de arquivos, mas apenas salvando-a na memória .
‫E então, apenas para dar uma
‫olhada nelas, vamos criar nosso próximo middleware aqui,
‫que será o único a processar essas imagens.
‫Portanto, exporte imagens de tour com redimensionamento de ponto, solicitação,
‫resposta e próximo, e agora vamos registrá-los no console.
‫Tudo bem, e no caso de termos vários
‫arquivos, são na verdade arquivos de ponto solicitados, e não apenas arquivos.
‫Tudo bem?
‫Então, isso aqui basicamente produzirá
‫arquivo de ponto de solicitação, enquanto os campos e
‫a matriz produzirão arquivos de ponto de solicitação, portanto, o plural.
‫Tudo bem, então registre isso no
‫console e também vamos chamar o próximo aqui
‫para que possamos
‫realmente terminar mais tarde o ciclo de solicitação-resposta, ok.
‫Salve-o e agora tudo
‫o que precisamos fazer para realmente testar a solicitação
‫é adicionar esses dois novos middlewares ao gerenciador de rotas.
‫Tudo bem, então, roteiros de turismo e assim como os usuários, para mantê-lo
‫simples aqui, só permitiremos o upload de
‫imagens em uma atualização de tour.
‫Então, aqui é onde temos a solicitação de patch, certo, e já
‫temos um monte de middlewares, então
‫proteja, restrinja a administradores e guias, e agora vamos
‫adicionar também imagens do tour de ponto de upload do controlador de
‫tour e tour de redimensionamento de ponto do controlador de tour imagens.
‫Essa é uma pilha de middleware muito boa aqui, certo?
‫E acho que agora estamos prontos
‫para realmente testar a solicitação que criamos aqui.
‫E, de novo, é claro que não vai fazer nada,
‫não vai salvar essas imagens em lugar nenhum e
‫também não vai atualizar o banco
‫de dados, mas por enquanto queremos apenas ver o resultado no console.
‫Bem, deveria ter atualizado o preço, então
‫vamos dar uma olhada nisso.
‫Sim, então o preço agora
‫atualizado, mas novamente as imagens obviamente não, certo?
‫E agora nós os temos no console, então vamos
‫aumentar um pouco mais e aqui temos
‫a capa da imagem onde obtivemos o nome do
‫campo, o nome original e também o
‫tipo MIME, ok, então você vê o buffer aqui e,
‫portanto, esta é basicamente uma representação
‫da imagem na memória.
‫É importante notar aqui
‫que, na verdade, até a capa da imagem é um array, certo?
‫Então, quando vamos
‫recuperar a imagem da capa da imagem,
‫teremos que usar o primeiro elemento deste array.
‫E então nas imagens, aqui é óbvio que
‫temos um array e aqui
‫para cada uma das imagens temos um objeto como este.
‫Assim, com o nome original, faça o tour quatro, três e dois e, em seguida,
‫cada um deles como um buffer.
‫Tudo bem, então tudo está bem conectado e tudo o que
‫precisamos fazer agora é basicamente criar essas imagens de tour
‫de redimensionamento, porque é aqui que as
‫imagens serão processadas e também
‫salvas no disco.
‫Ok, então esse é o tópico da próxima aula.