Existem três maneiras principais de lidar com uploads de arquivos no Node.js: salvar as imagens diretamente em seu servidor, salvar a imagem dados binários ou dados de string base64 em seu banco de dados e usando os baldes Amazon Web Service (AWS) S3 para salvar e gerenciar seus imagens.

Aqui você aprenderá como usar o Multer, um middleware Node.js, para carregar e salvar imagens diretamente em seu servidor em aplicativos Node.js em poucos passos.

Passo 1: Configurando o Ambiente de Desenvolvimento

O código utilizado neste projeto está disponível em um Repositório GitHub e é gratuito para você usar sob a licença do MIT.

Primeiro, crie uma pasta de projeto e vá para ela executando o seguinte comando:

mkdir multi-tutorial
cd multi-tutorial

Em seguida, inicialize o npm no diretório do seu projeto executando:

npm init -y

Em seguida, você precisará instalar algumas dependências. As dependências necessárias para este tutorial incluem:

  • Expressar: Express é uma estrutura Node.js que fornece um conjunto robusto de recursos para aplicativos da Web e móveis. Isso facilita a criação de aplicativos de back-end com o Node.js.
  • Multer: Multer é um middleware expresso que simplifica o upload e salvamento de imagens em seu servidor.

Instale os pacotes com o gerenciador de pacotes do nó Correndo:

npm instalar Multer expresso

A seguir, crie um app.js arquivo no diretório raiz do seu projeto e adicione o bloco de código abaixo para criar um servidor Express básico:

//app.js
const expresso = exigir('expressar');
const aplicativo = expresso();
const port = process.env. PORTO || 3000;
app.listen (porta, ()=>{
console.registro(`App está escutando na porta ${porta}`);
});

Etapa 2: Configurando o Multer

Primeiro, importe multer na tua app.js arquivo.

const Multer = exigir("multer");

multer requer um mecanismo de armazenamento que contenha informações sobre o diretório onde os arquivos carregados serão armazenados e como os arquivos serão nomeados.

A multer mecanismo de armazenamento é criado chamando o diskStorage método no importado multer módulo. Este método retorna um Storage Engine implementação configurada para armazenar arquivos no sistema de arquivos local.

Leva um objeto de configuração com duas propriedades: destino, que é uma string ou função que especifica onde as imagens carregadas serão armazenadas.

A segunda propriedade, nome do arquivo, é uma função que determina os nomes dos arquivos carregados. Leva três parâmetros: pedido, arquivo, e um retorno de chamada (cb). pedido é o expresso Solicitar objeto, arquivo é um objeto que contém informações sobre o arquivo processado e cb é um retorno de chamada que determina os nomes dos arquivos carregados. A função de retorno de chamada recebe o erro e o nome do arquivo como argumentos.

Adicione o bloco de código abaixo ao seu app.js arquivo para criar um mecanismo de armazenamento:

// Configurando o mecanismo de armazenamento
const storageEngine = multer.diskStorage({
 destino: "./imagens",
 nome do arquivo: (req, arquivo, cb) => {
 cb(nulo, `${Data.agora()}--${file.originalname}`);
 },
});

No bloco de código acima, você define o destino propriedade para ”./imagens”, assim, as imagens serão armazenadas no diretório do seu projeto em um imagens pasta. Então, no callback, você passou nulo como o erro e uma string de modelo como o nome do arquivo. A string de modelo consiste em um carimbo de data/hora gerado chamando Data.agora() para garantir que os nomes das imagens sejam sempre únicos, dois hífens para separar o nome do arquivo e o carimbo de data/hora e o nome original do arquivo, que pode ser acessado no arquivo objeto.

As strings resultantes deste modelo ficarão assim: 1663080276614--example.jpg.

Em seguida, você precisa inicializar multer com o mecanismo de armazenamento.

Adicione o bloco de código abaixo ao seu app.js arquivo para inicializar o Multer com o mecanismo de armazenamento:

//inicializando multer
const upload = Multer({
 armazenamento: storageEngine,
});

multer retorna uma instância Multer que fornece vários métodos para gerar middleware que processa arquivos carregados em multipart/form-data formatar.

No bloco de código acima, você passa um objeto de configuração com um armazenar propriedade definida como mecanismo de armazenamento, que é o mecanismo de armazenamento que você criou anteriormente.

Atualmente, a configuração do Multer está concluída, mas não há regras de validação que garantam que apenas imagens possam ser salvas em seu servidor.

Etapa 3: adicionar regras de validação de imagem

A primeira regra de validação que você pode adicionar é o tamanho máximo permitido para que uma imagem seja carregada em seu aplicativo.

Atualize seu objeto de configuração Multer com o bloco de código abaixo:

const upload = Multer({
 armazenamento: storageEngine,
limites: { tamanho do arquivo: 1000000 },
});

No bloco de código acima, você adicionou um limites ao objeto de configuração. Esta propriedade é um objeto que especifica vários limites nos dados recebidos. Você definiu o tamanho do arquivo propriedade, com a qual o tamanho máximo do arquivo em bytes é definido como 1000000, que é equivalente a 1 MB.

Outra regra de validação que você pode adicionar é a filtro de arquivo propriedade, uma função opcional para controlar quais arquivos são carregados. Esta função é chamada para cada arquivo que é processado. Esta função recebe os mesmos parâmetros que a nome do arquivo função: pedido, arquivo, e cb.

Para tornar seu código mais limpo e reutilizável, você abstrairá toda a lógica de filtragem em uma função.

Adicione o bloco de código abaixo ao seu app.js file para implementar a lógica de filtragem de arquivos:

const caminho = exigir("caminho");
const checkFileType = função (arquivo, cb) {
//Extensões de arquivo permitidas
const tipos de arquivo = /jpeg|jpg|png|gif|svg/;
 //verificar extensão nomes
const extName = fileTypes.test (path.extname (file.originalname).toLowerCase());
const mimeType = fileTypes.test (arquivo.mimetype);
 if (mimeType && extName) {
retornar cb(nulo, verdadeiro);
 } outro {
 cb("Erro: Você só pode fazer upload de imagens!!");
 }
};

O checkFileType função recebe dois parâmetros: arquivo e cb.

No bloco de código acima, você definiu um tipos de arquivo variável que armazena uma expressão regex com as extensões de arquivo de imagem permitidas. Em seguida, você ligou para o teste na expressão regex.

O teste o método verifica uma correspondência na string passada e retorna verdadeiro ou falso dependendo se ele encontra uma correspondência. Em seguida, você passa o nome do arquivo carregado, que você pode acessar através arquivo.nomeoriginal, no módulo do caminho extname método, que retorna a extensão do caminho da string para ele. Finalmente, você encadeia o JavaScript para letras minúsculas string à expressão para lidar com imagens com seus nomes de extensão em letras maiúsculas.

Verificar apenas o nome da extensão não é suficiente, pois os nomes das extensões podem ser facilmente editados. Para garantir que apenas as imagens sejam carregadas, você deve verificar o tipo MIME também. Você pode acessar um arquivo tipo mime propriedade através do arquivo.mimetype. Então, você verifica o tipo mime propriedade usando o teste método como você fez para os nomes de extensão.

Se as duas condições retornarem true, você retorna o callback com nulo e verdadeiro, ou você retorna o retorno de chamada com um erro.

Finalmente, você adiciona o filtro de arquivo à sua configuração do Multer.

const upload = Multer({
 armazenamento: storageEngine,
limites: { tamanho do arquivo: 10000000 },
 fileFilter: (req, arquivo, cb) => {
 checkFileType (arquivo, cb);
 },
});

Etapa 4: Usando Multer como um Express Middleware

Em seguida, você deve implementar manipuladores de rota que manipularão os uploads de imagens.

O Multer pode lidar com uploads de imagens únicas e múltiplas, dependendo da configuração.

Adicione o bloco de código abaixo ao seu app.js arquivo para criar um manipulador de rota para uploads de imagem única:

app.post("/single", upload.único("imagem"), (req, res) => {
se (pedido.arquivo) {
 res.enviar("Único arquivo enviado com sucesso");
 } outro {
 res.status (400).send("Carregue uma imagem válida");
 }
});

No bloco de código acima, você chamou o solteiro método no carregar variável, que armazena a configuração do Multer. Este método retorna um middleware que processa um “arquivo único” associado ao campo de formulário fornecido. Então, você passou o imagem como o campo de formulário.

Finalmente, verifique se um arquivo foi carregado através do pedido objeto no arquivo propriedade. Se foi, você envia uma mensagem de sucesso, senão você envia uma mensagem de erro.

Adicione o bloco de código abaixo ao seu app.js arquivo para criar um manipulador de rota para vários uploads de imagens:

app.post("/multiple", upload.array("imagens", 5), (req, res) => {
se (pedido.arquivos) {
 res.enviar("Múltiplos arquivos enviados com sucesso");
 } outro {
 res.status (400).send("Carregue imagens válidas");
 }
});

No bloco de código acima, você chamou o variedade método no carregar variável, que armazena a configuração do Multer. Esse método usa dois argumentos — um nome de campo e uma contagem máxima — e retorna um middleware que processa vários arquivos que compartilham o mesmo nome de campo. Então, você passou imagens como o campo de formulário compartilhado e 5 como o número máximo de imagens que podem ser carregadas de uma só vez.

Vantagens de usar Multer

O uso do Multer em seus aplicativos Node.js simplifica o complicado processo de upload e salvamento de imagens diretamente em seu servidor. O Multer também é baseado no busboy, um módulo Node.js para análise de dados de formulário recebidos, tornando-o muito eficiente para análise de dados de formulário.