Leodario.com

Leodario.com – Tudo sobre Tecnologia

Aula 39 – API JavaScript, Node.js e Express – File Upload – multer para arquivos

Imagem destacada da aula de API

Introdução (3 min)

Imagine um serviço de entrega onde você precisa enviar pacotes. Enviar dados simples, como texto, é como enviar uma carta. Mas e se você precisar enviar algo maior, como uma caixa cheia de itens? Aí entra o upload de arquivos. Nas APIs modernas, lidar com arquivos é essencial para funcionalidades como compartilhamento de fotos, envio de documentos e muito mais. Nesta aula, vamos construir um endpoint em Node.js com Express que permite o upload de arquivos usando o Multer, um middleware popular para lidar com multipart/form-data.

Conceito Fundamental (7 min)

O upload de arquivos é o processo de transmitir dados de um arquivo do cliente para o servidor. O Multer simplifica esse processo no Express, interceptando a requisição, processando o arquivo e disponibilizando-o para sua aplicação. A terminologia importante aqui é multipart/form-data, que é o tipo de codificação usado para enviar arquivos em requisições HTTP. Casos de uso comuns incluem plataformas de mídia social, sistemas de gerenciamento de documentos e plataformas de e-commerce. O Multer se integra perfeitamente com outros middlewares, como frameworks de validação, e facilita a manipulação de diferentes tipos de arquivos.

Vantagens do Multer:

    • Fácil configuração e integração com o Express.
    • Manipulação eficiente de diferentes tipos de arquivos.
    • Flexibilidade na configuração do destino e nomeação de arquivos.

Desvantagens do Multer:

    • Depende do Express.
    • Pode exigir middlewares adicionais para validação avançada de arquivos.

Implementação Prática (10 min)

const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');

const app = express(); const port = 3000;

// Configuração do Multer para salvar arquivos em 'uploads/' const storage = multer.diskStorage({ destination: function (req, file, cb) { // Cria o diretório se não existir fs.mkdirSync('./uploads', { recursive: true }); cb(null, './uploads'); }, filename: function (req, file, cb) { const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9); cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname)); } });

const upload = multer({ storage: storage });

app.post('/upload', upload.single('arquivo'), (req, res) => { try { if (!req.file) { return res.status(400).send('Nenhum arquivo enviado.'); } // Log para fins de demonstração (em produção, use um logger profissional) console.log(Arquivo '${req.file.originalname}' enviado com sucesso.); res.send(Arquivo '${req.file.originalname}' enviado com sucesso. Salvo como ${req.file.filename});

} catch (error) { console.error("Erro no upload:", error); // Log de erro res.status(500).send('Erro ao fazer upload do arquivo.'); } });

app.listen(port, () => { console.log(Servidor rodando em http://localhost:${port}); });

npm install express multer

Neste código, configuramos o Multer para salvar os arquivos em uma pasta uploads. O upload.single('arquivo') indica que esperamos um único arquivo com o nome do campo 'arquivo'. Usamos diskStorage para definir o destino e o nome do arquivo, garantindo nomes únicos e evitando colisões. O código inclui tratamento de erros e logging básico.

Exercício Hands-On (5 min)

Crie um novo endpoint /upload-multiplo que permita o upload de múltiplos arquivos simultaneamente. Utilize o método upload.array('arquivos', 3) para aceitar até 3 arquivos com o nome do campo 'arquivos'. Teste o endpoint usando um formulário HTML ou uma ferramenta como Postman.

Solução:

// ... (código anterior) ...

app.post('/upload-multiplo', upload.array('arquivos', 3), (req, res) => { try { if (!req.files || req.files.length === 0) { return res.status(400).send('Nenhum arquivo enviado.'); } req.files.forEach(file => { console.log(Arquivo '${file.originalname}' enviado com sucesso. Salvo como ${file.filename}); }); res.send(${req.files.length} arquivos enviados com sucesso.); } catch (error) { console.error("Erro no upload:", error); res.status(500).send('Erro ao fazer upload dos arquivos.'); } });

// ... (restante do código) ...

Para testar, envie uma requisição POST para /upload-multiplo com múltiplos arquivos no campo 'arquivos'. Verifique se os arquivos foram salvos corretamente na pasta uploads.

Próximos passos: explore outras opções de configuração do Multer, como limites de tamanho de arquivo e filtros de tipo de arquivo. Integre com um banco de dados para armazenar informações sobre os arquivos enviados.

🚀 Pronto para a próxima aula?

Continue sua jornada no desenvolvimento de APIs e domine Node.js & Express!

📚 Ver todas as aulas