‫Jonas: Agora vamos configurar o Multer de acordo com as nossas necessidades.
‫Primeiro dando às imagens um nome de arquivo melhor,
‫depois permitindo que apenas os arquivos de imagem
‫sejam carregados em nosso servidor.
‫E para começar, vamos mover
‫todas as coisas relacionadas
‫ao Multer deste roteador para o controlador.
‫Então vamos cortar
‫isso aqui, e vou colocá-lo bem aqui
‫no final, ou na verdade no topo, certo?
‫Então, tudo relacionado a
‫Multer, vamos colocar aqui no topo.
‫Então, também precisamos, é claro, importar este pacote Multer.
‫E agora também precisamos criar um middleware com isso.
‫Portanto, as exportações. uploadUserPhoto será
‫igual a isso.
‫Tudo bem, então ainda temos uma função
‫de middleware, mas agora ela tem seu próprio nome mais fácil de usar, certo?
‫E aqui, userController. uploadPhoto, certo?
‫Isso parece muito melhor e,
‫claro, faz sentido
‫que esse código esteja no controlador.
‫E agora isso está bom
‫e limpo, e podemos realmente fechá-lo agora.
‫Ótimo, então agora vamos configurar
‫nosso upload Multer de acordo com nossas necessidades.
‫E para isso vamos criar um armazenamento Multer
‫e um filtro Multer, certo?
‫E então vamos usar esse armazenamento e
‫o filtro para criar o upload a partir daí, certo?
‫Então, vamos fazer isso aqui.
‫Então, um multerStorage, usamos multer. diskStorage.
‫Tudo bem, e também podemos
‫escolher armazenar o arquivo na memória como um
‫buffer, para que possamos usá-lo posteriormente por outros processos.
‫E, na verdade, faremos isso um pouco
‫mais tarde, mas por enquanto é claro que queremos
‫realmente armazenar o arquivo como está em nosso sistema de arquivos, certo?
‫Portanto, para o armazenamento em disco, tomaremos algumas opções, e
‫a primeira é o destino.
‫Mas agora não podemos simplesmente defini-lo neste caminho
‫como fizemos antes.
‫Não, isso é um pouco mais complexo, certo?
‫E então, realmente este destino aqui é uma função de retorno
‫de chamada que funciona assim.
‫Portanto, essa função de retorno de chamada tem acesso à solicitação atual, ao
‫arquivo carregado no momento e também a
‫uma função de retorno de chamada.
‫E essa função de retorno de
‫chamada é um pouco como a próxima função no Express.
‫Mas estou chamando de cb aqui, que significa callback,
‫então é um nome diferente
‫de next, porque na verdade não vem do Express, certo?
‫Mas é semelhante porque podemos passar erros aqui e outras
‫coisas, como você verá em um segundo.
‫Portanto, agora para definir
‫o destino, precisamos chamar esse retorno de chamada.
‫Portanto, o retorno de chamada e o primeiro argumento é um
‫erro, se houver.
‫E se não, apenas nulo.
‫E o segundo argumento é o destino real.
‫Então, vamos copiar
‫isso daqui e colá-lo aqui.
‫Tudo bem, e novamente tudo parece um pouco estranho e complexo, e vamos realmente
‫dar uma olhada
‫na documentação do Multer no GitHub.
‫Ok, então se você precisar
‫aprender mais, você pode dar uma olhada nesta documentação aqui.
‫E, como você pode
‫ver, com 6.000 estrelas, é na verdade um pacote bastante popular.
‫Então, aqui você pode aprender como usá-lo.
‫Mas, na verdade, o que
‫você vai encontrar aqui
‫é o que faremos nas próximas aulas, certo?
‫Parece muito mais confuso do que
‫o que vamos fazer, certo?
‫Mas você vê
‫que isso é realmente o que estamos fazendo atualmente, então estamos definindo
‫o destino e, a seguir, também definiremos o nome do arquivo.
‫Então, vamos fazer isso, e novamente, se você quiser aprender
‫mais, basta dar uma olhada nessa documentação.
‫Mas, por enquanto, quero definir a propriedade do nome do arquivo.
‫Então não é isso, simplesmente nome do arquivo.
‫E, novamente, essa é uma função de retorno
‫de chamada muito semelhante com uma assinatura, solicitação, arquivo e retorno de chamada semelhantes.
‫E agora queremos dar aos nossos arquivos alguns nomes de arquivo exclusivos.
‫E a maneira
‫como vou fazer isso é chamá-los de user-userid- o carimbo de data / hora atual.
‫Então algo assim: então usuário-,
‫e então o ID que é estranho, algo assim.
‫Certo, e então o carimbo de
‫data / hora atual, que será um número enorme,
‫algo como isso e, claro, a extensão do arquivo, certo?
‫E com isso podemos garantir basicamente
‫que não haverá duas imagens com o mesmo nome de arquivo.
‫Se usássemos apenas o ID
‫do usuário, é claro que vários uploads feitos
‫pelo mesmo usuário substituiriam a imagem anterior.
‫E se usássemos apenas usuário com o carimbo de data / hora,
‫bem, se dois usuários estivessem enviando uma imagem ao mesmo tempo,
‫eles obteriam exatamente o mesmo nome de arquivo, o
‫que não faz sentido.
‫Tudo bem, então antes de
‫tudo, vamos extrair o nome do arquivo do arquivo enviado.
‫E como vamos conseguir isso?
‫Bem, vamos dar uma olhada na saída do nosso console
‫aqui, onde tínhamos a solicitação. arquivo há muito tempo.
‫Então aqui está, então lembre-se de que este objeto
‫aqui foi pedido. arquivo, e isso
‫é exatamente o que esse arquivo aqui é, ok?
‫E aqui temos o tipo
‫MIME, para que o JPEG seja armazenado aqui, certo?
‫E é aqui que vamos obter
‫a extensão do arquivo.
‫Portanto, a extensão é igual ao arquivo. tipo MIME, e então
‫vamos dividir essa string pela barra e pegar
‫o segundo elemento do array resultante.
‫E então essa será apenas esta parte, apenas esta.
‫Tudo bem, então essa é a extensão.
‫E agora, como antes,
‫precisamos chamar a função de retorno de chamada sem erro e, em seguida,
‫o nome do arquivo que desejamos especificar.
‫Então, esse será o usuário-, então o ID do usuário, lembra?
‫E então, como temos acesso ao pedido aqui, é
‫muito simples, solicitar. do utilizador. Eu iria.
‫E como você sabe, esse
‫é o ID do usuário conectado no momento.
‫Em seguida, o carimbo de data / hora, então Data. agora, ok, e então
‫pontilhe a extensão que acabamos de criar, certo?
‫Então, vamos nos livrar desse
‫comentário, e esse é realmente nosso armazenamento.
‫E então basicamente uma definição completa de como
‫queremos armazenar nossos arquivos, com
‫o destino e o nome do arquivo.
‫A seguir, vamos criar um filtro Multer.
‫Então, vamos chamá-lo exatamente assim.
‫E o filtro no Multer é simplesmente, novamente,
‫uma função de retorno de chamada, semelhante às que tínhamos
‫antes, acessando a solicitação, o arquivo e uma função de retorno de chamada.
‫E nesta função, o objetivo
‫é basicamente testar se o arquivo enviado é uma imagem.
‫E se for assim, passamos verdadeiro para a função
‫de retorno de chamada e, se
‫não for, passamos falso para a função de retorno de chamada,
‫junto com um erro.
‫Porque, novamente, não queremos permitir o upload
‫de arquivos que não sejam imagens.
‫E é exatamente para isso que serve esse filtro.
‫Agora, se em seu próprio
‫aplicativo você quiser fazer upload de outra coisa, digamos arquivos CSV, então
‫é claro que você pode testar isso em vez de imagens.
‫Portanto, tudo o que estamos fazendo aqui
‫funciona não apenas para
‫imagens, mas também para todos os
‫tipos de arquivos que você deseja enviar, certo?
‫Agora, novamente, neste caso, estamos realmente falando sobre imagens, então vamos
‫testar se o arquivo enviado é uma imagem.
‫E para isso usaremos mais uma vez o tipo
‫MIME, porque qualquer tipo de
‫imagem carregado, então não importa se é JPEG, ou PNG, ou
‫bitmap, ou TIFF, ou realmente qualquer
‫coisa, o tipo MIME sempre começará com imagem.
‫E agora podemos testar isso.
‫Portanto, se o arquivo. tipo MIME. startsWith, image e,
‫portanto, não tenho certeza se já usamos esse antes, mas é
‫um método de string relativamente novo e muito útil que
‫está disponível em JavaScript, ou seja,
‫em todo JavaScript em geral.
‫Então caso tenhamos realmente uma imagem, bom, então novamente
‫não há erro e passamos verdadeiro, como
‫disse no início.
‫Caso contrário, passaremos um erro e, em
‫seguida, falso.
‫Então, vamos colocar um x aqui, e falso.
‫Portanto, para este x aqui, criaremos agora um AppError, assim como
‫temos feito o tempo todo.
‫E na verdade já temos isso aqui.
‫Então, digamos
‫que um novo AppError, não
‫uma imagem, carregue apenas imagens, certo?
‫E então 400 para um pedido incorreto.
‫Ótimo, então temos nosso armazenamento, temos nosso filtro, agora
‫é hora de
‫realmente usá-los para criar o upload.
‫Certo, o upload agora não será mais
‫assim, mas passaremos essas variáveis.
‫Portanto, no Multer podemos especificar o armazenamento, e
‫esse é o nosso multerStorage.
‫E então o
‫fileFilter, que é a variável que chamamos de multerFilter.
‫Ok, e é isso.
‫E, claro, poderíamos ter colocado
‫tudo isso aqui diretamente neste objeto de opções aqui.
‫Mas geralmente prefiro fazer isso do lado de
‫fora e, em seguida, simplesmente passar as variáveis para um objeto de opções.
‫Então isso parece um pouco mais limpo.
‫Portanto, esta é uma série de
‫etapas que precisamos seguir para realmente criar nosso middleware Multer.
‫Mas finalmente nós então é
‫claro, assim como fizemos
‫no último vídeo, usamos esse upload, e nisso chamamos de
‫single, com o nome do campo.
‫Então, foto e, a partir daí, criamos uma
‫exportação, ou middleware, que já incluímos
‫em nosso roteador.
‫Então, vamos agora deletar esse tipo de imagem antigo
‫que tínhamos aqui antes.
‫Não, isso não funcionou.
‫E agora vamos realmente testá-lo aqui novamente.
‫Então, de volta ao Postman, ainda temos nosso nome aqui
‫e a imagem de Leo, então vamos lá.
‫E não tivemos nenhum erro, o que é bom.
‫E vamos ver nossa saída aqui novamente.
‫Portanto, tudo aqui no início é o
‫mesmo, mas então você verá que nosso nome de arquivo agora está correto.
‫E se você der uma olhada aqui na nossa
‫pasta, então aí está a nossa imagem.
‫E é exatamente isso que carregamos.
‫Então isso está em dev-data, imagens, Leo.
‫E, de fato, isso é exatamente o mesmo.
‫Ótimo, isso é incrível.
‫Agora, apenas para testar este filtro aqui
‫também, vamos tentar fazer upload de algum outro arquivo que não seja uma imagem.
‫Então, vamos selecionar outra coisa aqui de nossos dados
‫dev, e digamos simplesmente alguns dados JSON.
‫E então vamos esperar se ocorrer um erro aqui.
‫E, de fato, temos um.
‫Portanto, não é uma imagem, faça upload apenas de imagens.
‫E isso significa que também funciona.
‫Tão perfeito, toda a nossa configuração Multer agora funciona
‫muito bem, mas é claro que
‫ainda falta uma etapa.
‫E isso é para realmente
‫vincular o usuário à imagem recém-atualizada, certo?
‫Porque agora, no banco de dados,
‫obviamente ainda temos o
‫caminho, ou na verdade o nome da
‫imagem antiga, porque em nenhum lugar do nosso
‫código especificamos que queríamos atualizar o próprio documento do usuário, certo?
‫E então vamos corrigir isso no próximo vídeo.