Upload de arquivo com Multer em Node.js e Express

Quando um cliente da Web carrega um arquivo para um servidor, ele geralmente é enviado por meio de um formulário e codificado como multipart/form-data. Multer é o middleware Express usado para lidar com isso multipart/form-data quando seus usuários fazem upload de arquivos.

Neste tutorial, mostrarei como usar a biblioteca Multer para lidar com diferentes situações de upload de arquivos no Node.

Como o Muller funciona?

Como eu disse acima, Multer é um middleware Express. Middleware é um software que conecta diferentes aplicativos ou componentes de software. No Express, o middleware processa e transforma as solicitações recebidas no servidor. No nosso caso, o Multer atua como um auxiliar no upload de arquivos.

Configuração do projeto

Estaremos usando o framework Node Express para este projeto. Claro, você precisará ter o Node instalado.

Crie um diretório para nosso projeto, navegue até o diretório e execute npm init -y para criar um pacote.json arquivo que gerencia todas as dependências da nossa aplicação. o -y sufixo—também conhecido como yes bandeira-é usado para aceitar os valores padrão que vêm de npm init Comandos automaticamente.

Em seguida, instalaremos o Multer, o Express e as outras dependências necessárias para inicializar um aplicativo Express.

Nós vamos criar um server.js Arquivo

No server.js arquivo, inicializaremos todos os módulos, criaremos um aplicativo Express e criaremos um servidor para conectar aos navegadores.

Depois de solicitar pacotes e ouvir nosso servidor em port:3000 podemos executar o trecho node server.js pois isso executa nosso servidor localmente. Podemos navegar para localhost:3000 no seu navegador e você deverá ver a seguinte mensagem.

mensagem de boas-vindasmensagem de boas-vindasmensagem de boas-vindas

Crie o código do cliente

Quando tivermos certeza de que nosso servidor está funcionando bem, a próxima coisa será criar um index.html para escrever todo o código que será servido ao cliente.

Este arquivo conterá os diferentes formulários que usaremos para carregar nossos diferentes tipos de arquivo.

Abra o server.js arquivo e escreva uma rota GET que renderiza o index.html arquivo em vez do “RECEBER” mensagem.

Armazenamento do Multer

A próxima coisa será definir um local de armazenamento para nossos arquivos. Multer oferece a opção de armazenar arquivos na memória multer.memoryStorage ou para disco memory.diskStorage. Para este projeto vamos armazenar os arquivos em disco.

Para o armazenamento em disco, temos dois objetos que são destino e nome do arquivo. destination é usado para informar ao Multer onde fazer upload dos arquivos e filename é usado para nomear o arquivo dentro do destino.

Para criar nosso diretório de destino, execute o trecho de código abaixo para criar uma nova pasta uploads

Aqui, adicionaremos os seguintes snippets de código ao server.js Arquivo.

Lidando com uploads de arquivos

Carregando um único arquivo

No index.html arquivo, definimos um atributo de ação que executa uma solicitação POST. Agora precisamos criar um endpoint no aplicativo Express. Abra o server.js arquivo e adicione o seguinte trecho de código:

Observe que o nome do arquivo de entrada deve ser o mesmo que o myFile argumento passado para o upload.single função.

Fazendo upload de vários arquivos

O upload de vários arquivos com o Multer é semelhante ao upload de um único arquivo, mas com algumas alterações. o upload.array O método aceita dois parâmetros que são o nome do campo obrigatório myFiles e a contagem máxima de arquivos 12.

Fazendo upload de imagens

Em vez de salvar as imagens carregadas no sistema de arquivos, vamos armazená-las em um banco de dados MongoDB para que possamos recuperá-las posteriormente, conforme necessário. Mas primeiro, vamos instalar o MongoDB.

Em seguida, nos conectaremos ao MongoDB através do Mongo.client e, em seguida, adicione a URL do MongoDB a esse método. Você pode usar um serviço em nuvem como o Mlab, que oferece um plano gratuito, ou simplesmente usar a conexão disponível localmente. Neste tutorial, usaríamos a conexão disponível localmente, conforme mostrado abaixo. Incluiríamos os trechos de código abaixo no server.js Arquivo

Precisaríamos ler o caminho do arquivo de nossa solicitação e no Nodejs, o conteúdo de um arquivo pode ser lido usando o file-system (fs) módulo. Temos que instalar o file-system dependência como mostrado abaixo

o file-system module é um módulo embutido que possui os métodos readFile() e readFileSync(). Neste tutorial, usaremos o readFileSync() método. o readFileSync() é usado para ler o conteúdo de um arquivo de forma síncrona, isso significa que o método deve ser concluído antes que a execução do programa continue. Este método aceita o parâmetro patheste é o caminho relativo do arquivo que você deseja ler.

Aberto server.js, exigir o file-system dependência e definir uma solicitação POST que permite salvar imagens no banco de dados.

No código acima, primeiro codificamos a imagem em uma string base64, construímos um novo buffer a partir da string codificada em base64 e, em seguida, salvamos em nossa coleção de banco de dados no formato JSON.

Em seguida, exibimos uma mensagem de sucesso e redirecionamos o usuário para a página de índice.

Recuperando Imagens Armazenadas

Para recuperar as imagens armazenadas, realizamos uma pesquisa no MongoDB usando o find método e retornar uma matriz de resultados. Seguimos então e obtemos o _id atributos de todas as imagens e devolvê-los ao usuário.

Como já conhecemos os ids das imagens, podemos visualizar uma imagem passando seu id no navegador, conforme ilustrado abaixo.

Imagem salvaImagem salvaImagem salva

Conclusão

Espero que você tenha achado este tutorial útil. O upload de arquivos pode ser um tópico intimidador, mas não precisa ser difícil de implementar. Com Express e Multer, o manuseio multipart/form-data é fácil e direto.

Você pode encontrar o código-fonte completo para o exemplo de upload de arquivo em nosso repositório do GitHub.

Este post foi atualizado com contribuições de Mary Okosun. Mary é desenvolvedora de software com sede em Lagos, Nigéria, com experiência em tecnologias Node.js, JavaScript, MySQL e NoSQL.

Deixe um comentário

O seu endereço de e-mail não será publicado.