‫Narrador: Na primeira parte desta
‫seção, aprenderemos tudo sobre como fazer upload
‫de imagens com o pacote Multer e, neste vídeo em
‫particular, começaremos a implementar uploads de imagens para fotos de usuários.
‫Mas antes de começarmos, vamos fazer uma limpeza rápida
‫aqui e nos livrar dessa saída constante de
‫cookies que temos aqui.
‫Então está em algum lugar aqui embaixo e é muito melhor.
‫Agora vamos trabalhar no upload de fotos
‫do usuário e vamos abrir aqui as rotas do usuário, tudo bem.
‫Portanto, Multer é um middleware muito popular para lidar com
‫dados de formulário com várias partes, que é um formulário de codificação usado
‫para fazer upload de arquivos de um formulário.
‫Portanto, lembre-se de como na última seção
‫usamos um formulário codificado por URL para atualizar os dados do usuário
‫e para isso também tivemos que incluir um middleware especial.
‫Portanto, Multer é basicamente um middleware
‫para dados de formulário com várias partes.
‫E agora aqui está o que vamos fazer.
‫Permitiremos que o usuário carregue uma foto
‫na rota Atualize-me e, portanto, em
‫vez de apenas poder atualizar o e-mail e a
‫foto, os usuários também poderão fazer o upload de suas fotos.
‫Então, mais uma vez, vamos começar instalando o
‫pacote de que precisamos e, na verdade, vamos criar
‫uma nova janela de terminal aqui para que o NPM instale o Multer.
‫Tudo bem e aqui vemos que estamos no Multer 1. 4 1
‫E então, novamente, caso você tenha algum problema
‫com este pacote, certifique-se de instalar
‫a mesma versão que estou usando aqui.
‫Tudo bem.
‫Então, vamos incluir isso aqui.
‫Então, Multer, exige, Multer.
‫Então, fácil e agora precisamos configurar um chamado
‫upload Multer e então usá-lo.
‫E vamos fazer isso aqui no
‫início e vamos chamá-lo de Upload e chamar a função Multer que acabamos
‫de incluir antes e, em seguida, passar
‫um objeto para algumas opções.
‫E, por enquanto, a única opção
‫que vamos especificar é o
‫destino e vou defini-lo como Público / imagem / usuários, tudo bem.
‫E essa é exatamente a pasta
‫onde queremos salvar todas as imagens
‫que estão sendo carregadas.
‫Então está aqui, Público, Imagem e Usuários, como todas as imagens de
‫todos os usuários que já
‫temos em nosso banco de dados.
‫Certo e é claro que podemos configurar isso
‫de uma forma muito mais complexa e
‫faremos isso em nossa próxima
‫aula, mas por agora eu realmente quero que você apenas
‫introduza este pacote e, a propósito, poderíamos
‫apenas ter chamado a função Multer sem nenhuma opção.
‫Portanto, sem isso aqui e depois, a imagem carregada seria
‫simplesmente armazenada na memória e não salva em
‫nenhum lugar no disco, mas é claro que neste ponto não é o
‫que queremos e, portanto, pelo menos precisamos especificar esta opção de destino.
‫E com isso, nosso arquivo é realmente
‫carregado em um diretório em nosso sistema de arquivos.
‫E eu mencionei isso antes, mas vamos
‫ter certeza de que estamos na mesma página sobre
‫isso, que é claro que as imagens não são carregadas
‫diretamente no banco de dados, apenas fazemos upload delas
‫em nosso sistema de arquivos e, em seguida, no banco
‫de dados coloque um link basicamente para essa imagem.
‫Portanto, neste caso, em cada documento do
‫usuário, teremos que nomear todos os arquivos carregados, ok.
‫Agora, novamente, não faremos isso neste vídeo, mas
‫faremos um pouco mais tarde.
‫Por enquanto, vamos apenas fazer isso funcionar.
‫De qualquer forma, o que precisamos fazer
‫agora é usar este upload aqui para realmente criar uma
‫função de middleware que possamos colocar aqui na rota Atualizar-me.
‫Então aqui, e funciona assim.
‫Então carregue, ponto único, e é único porque aqui queremos apenas
‫atualizar uma única imagem e aqui em single
‫passamos o nome do campo que vai
‫conter a imagem para upload.
‫E então essa será a foto, ok.
‫E com campo quero dizer o campo
‫do formulário que vai fazer o upload da imagem.
‫Tudo bem, faz sentido?
‫Novamente, incluímos o pacote Multer e,
‫com isso, criamos um upload.
‫E este upload é apenas para definir algumas
‫configurações onde neste exemplo nós apenas definimos o destino, então usamos
‫esse upload para criar um novo middleware que podemos
‫adicionar a esta pilha da rota que queremos usar
‫para fazer upload do arquivo .
‫Então, para isso, dizemos upload ponto single
‫porque temos apenas um único
‫arquivo e, finalmente, especificamos o nome do
‫campo que vai conter este arquivo.
‫Ok, então este middleware irá se encarregar
‫de pegar o arquivo e basicamente copiá-lo
‫para o destino que especificamos.
‫E depois disso, é claro, ele
‫chamará o próximo middleware na pilha, que é Atualizar-me.
‫Além disso, este middleware aqui colocará o arquivo ou
‫pelo menos algumas informações sobre
‫o arquivo no objeto de solicitação
‫e, portanto, vamos dar uma olhada nisso.
‫Então, vamos para a função Atualizar-me.
‫Então, bem aqui e bem aqui no
‫início, digamos log de ponto de console, arquivo de ponto reg.
‫Tudo bem?
‫E também quero dar uma olhada no corpo.
‫Ótimo e com isso agora estamos realmente
‫prontos para testar isso e por enquanto iremos testá-lo no
‫carteiro, mas é claro que
‫mais tarde também adicionaremos essa funcionalidade ao formulário, certo.
‫Então, vamos ao carteiro aqui e me atualize.
‫Então, basicamente, para atualizar o usuário atual.
‫E o usuário que quero atualizar se chama Leo,
‫então vamos buscá-lo aqui do Compass, ou na verdade acho
‫que nem é necessário porque no nosso login
‫já temos esse tipo de endereço de e-mail e o e-mail
‫dele é leo @ exemplo. com e a
‫senha é sempre a mesma.
‫E então, é claro, primeiro precisamos fazer o login como o
‫usuário e agora vamos prosseguir e atualizar para o usuário.
‫Portanto, no corpo temos o nome e a função.
‫Então, vamos apenas atualizar, digamos o nome aqui.
‫Portanto, o nome atual é Leo Gillespie ou Gillespie, não tenho certeza de
‫como dizer isso.
‫Vamos apenas adicionar algo aqui no meio, ok.
‫E agora, finalmente, especificamos a propriedade da foto ou,
‫na verdade, não deveríamos fazer assim, mas em
‫vez disso, devemos ir aqui para os dados do formulário, certo, porque é
‫assim que podemos
‫enviar dados de formulário com várias partes.
‫Então, vamos copiar apenas o nome aqui e seu Nome.
‫Tudo bem, então aqui a chave é Nome
‫e o valor é este.
‫Em seguida, finalmente especificamos o campo da foto e
‫aqui podemos realmente especificar o que queremos.
‫E assim, em vez de texto, que
‫é o padrão, podemos especificar o arquivo e, então, podemos selecionar o
‫arquivo que queremos enviar.
‫Então esse arquivo, essa imagem, está aqui em nossos dados de definição novamente, depois
‫em imagem e aqui a imagem de Leo.
‫E é por isso que mostra este usuário.
‫Ok, então clique em abrir e agora acho que
‫estamos prontos para enviar essa solicitação.
‫Tudo bem, tivemos sucesso e claro, como eu disse antes, a foto obviamente
‫não foi atualizada aqui na saída do banco de dados porque
‫isso é para a próxima aula.
‫Por enquanto, queremos apenas fazer o upload desta imagem
‫para a pasta que especificamos.
‫Tudo bem, agora vamos também dar uma olhada aqui em nossa saída e
‫aqui temos o arquivo de ponto de solicitação, que é este, e assim
‫obteremos todos os tipos de informações sobre ele.
‫Portanto, o nome original, é o destino que especificamos, o novo
‫nome do arquivo aqui e também o tamanho.
‫Ok, então esse é o arquivo de ponto de solicitação e lembre-se
‫de que também registramos o corpo.
‫E então o corpo agora é apenas o nome, certo.
‫Portanto, nosso body parse não é realmente capaz de lidar com
‫arquivos e é por isso que o arquivo
‫não está aparecendo no corpo e,
‫claro, esse é o único motivo pelo qual realmente precisamos do pacote Multer.
‫De qualquer forma, vamos agora dar uma olhada em nossa
‫pasta e aqui temos imagens, usuários, e em algum lugar aqui deve estar
‫a imagem que acabamos de enviar, mas
‫não consigo realmente vê-la aqui.
‫Vamos atualizar, ah e de fato aqui está.
‫Então, se clicarmos agora, não poderemos realmente ver
‫porque, como você pode
‫ver aqui, nem mesmo tem uma extensão, ok.
‫E é por isso que não podemos realmente abri-lo neste momento.
‫Então o arquivo realmente apareceu aqui em nossa pasta
‫e então temos o upload funcionando.
‫Bem, pelo menos mais ou menos, mas
‫não estamos realmente onde queremos, certo.
‫Portanto, queremos dar a ele um nome de
‫arquivo melhor e também reorganizar
‫um pouco esse código que temos neste ponto.
‫E então vamos fazer isso no próximo vídeo.