Fala minha gente! É com muito prazer que escrevo esse artigo tentando resolver um problema que tenho visto nos forums assolar a vida de muitos programadores: como fazer o upload de imagens, e principalmente: como comprimi-las e tratá-las após recebe-las no servidor. Ficou um artigo um pouco longo pois nele desenvolvo um passo-a-passo bem explicado, mas continua que vale a pena!
\nPara prosseguir, vamos utilizar duas bibliotecas: o Multer, para o upload de imagens, e o Sharp, para processar essas imagens(redimensionar, comprimir, converter…). Ambos são middlewares para utilizar com NodeJS, e nesse artigo, utilizaremos com Express, embora funcionem sem.
\nComo falei acima, vamos instanciar nosso middleware executando a biblioteca com as nossas próprias configurações. Primeiro, vamos apontar as informações ligadas ao armazenamento, como o destino desses arquivos e como eles irão se chamar. Essas opções vão na propiedade storage do nosso objeto. Também podemos configurar um validador, para aceitar apenas certos tipos de extensões, na nossa propriedade fileFilter. Como queremos salvar arquivos no disco, vamos executar utilizar a função diskStorage, disponibilizada pela biblioteca, que vai fazer a lógica do armazenamento, basta configurarmos duas propiedades que recebem funções, e executar o callback que vem em seus parâmetros corretamente. Como você pode ver, a configuração de armazenamento tem duas propriedades: destination e filename, que vão apontar o destino dos arquivos e o nome deles, respectivamente. Elas recebem funções, onde teremos acesso aos parâmetros: Essa configuração é a responsável pela validação do arquivo. Se a validação falhar, vamos receber um objeto undefined na requisição do nosso controller, e se o arquivo for aprovado, ele vai ser armazenado e receberemos na requisição um objeto com as informações dele e do armazenamento que foi realizado. Enfim, para usar essa opção basta indicar a propriedade fileFilter no nosso objeto de opções. *Essa propriedade recebe uma função com os mesmos parâmetros que vimos nas propriedades destination e filename.* Lembra que essa função nos da acesso, por meio dos parâmetros, a informações sobre o arquivo que recebemos? Esse objeto tem a propriedade mimetype, que é o tipo(extensão?) do arquivo. Basta testarmos se essa propriedade se encaixa com os formatos que esperamos, e baseado nisso, executamos o callback, passando false para rejeitado, e true para aceito. Abaixo você encontra a nossa propiedade fileFilter, com comentários indicando o que está acontecendo, e o nosso objeto de opções finalizado. Geralmente as pessoas usam uma cadeia de ifs para testar o mimetype, mas eu prefiro essa forma automatizada que pensei, assim é só adicionar no array os formatos que queremos. Vamos aplicar isso nas nossas rotas? Chegou a hora de usar o nosso middleware previamente configurado. Vou usar duas rotas simples, uma que renderiza o formulário com GET e outra que recebe o POST desse formulário. As rotas são apenas para propósitos educativos, então estão bem simples sem padronização MVC, por exemplo. Dois detalhes que ressaltei no código, os quais são MUITO importantes, causando a maioria dos erros: No nosso POST, nós vamos executar também como um middlewared a rota, o nosso multer, indicando a ele o name do form que queremos tratar. Como queremos apenas um campo, vamos usar o método single, enviando como parâmetro o name do campo que o middleware deve agir. Existem outras formas, como usar mais de um name, que você encontra na documentação do Multer. Caso você esteja iniciando no Node/Express: em uma rota, nós podemos passar como parâmetros vários middlewares, que são funções/funcionalidades que processam a nossa requisição, sendo executadas na ordem apontada (explicando de maneira hypermega minimalista). O Multer, que é executado antes do middleware principal, vai filtrar a nossa requisição, procurar pelo campo indicado e tratar ele. A saída desse campo tratado vai ser armazenada na propiedade file da nossa requisição. O restante dos campos, se houver, vai normalmente para o req.body, como se fosse um form qualquer. Obs: Esse bloco de código está logo embaixo do que mostrei acima, não coloquei um em baixo do outro para não ficar muito grande. Para testar se o armazenamento ocorreu com sucesso, apenas checamos se essa saída que o middleware multer.single(‘image’) atribuiu ao req.file não é undefined, que é seu valor se não passar no filtro, ou ocorrer algum outro erro. Ao contrário, a saída vai ser um objeto com várias propriedades, incluindo o caminho até o arquivo, por exemplo. Agora que o nosso upload está funcionando, vamos para o tratamento dessa imagem! Para focar o código importante em um único lugar, vamos criar um utilitário próprio, utilizando as bibliotecas fs (já tem por default no node), e Sharp, que nós já instalamos. Para isso vou criar um arquivo chamado file-helper.js, que exporta uma função chamada compressImage, com toda a lógica de compressão, recebendo como parâmetro o objeto que recebemos do Multer com as informações do arquivo, e o tamanho que queremos que ela seja redimensionada. O esqueleto vai ficar assim: Essa função deve redimensionar a imagem recebida, converter para WEBP, e substituir o arquivo antigo pelo tratado. No final, quero esse arquivo em Buffer, para salvar com o módulo fs.* O Sharp tem uma série de possibilidades e métodos, que podemos executar no estilo chain, incluindo salvar diretamente no disco, mas nos meus testes ocorreram vários bugs, então preferi trabalhar com o Buffer em conjunto com o fs. Continuando nosso código, vamos codar a lógica de processamento até receber o Buffer, abaixo você encontra o código explicado: Como você deve ter entendido, apenas executei a biblioteca passando o caminho da imagem que quero processar, e fui concatenando com outras funções da biblioteca, para fazer os tratamentos. Prosseguindo com o armazenamento do Buffer, nós vamos primeiro apagar o arquivo anterior salvo pelo Multer, e depois salvar o novo .webp comprimido. Se tudo ocorreu corretamente, o retorno vai ser o caminho da imagem nova, para podermos usar na nossa rota, caso você tenha que salvar no banco de dados, por exemplo. Vou utilizar três métodos do file-system(fs), o access, que nesse código serve para testar se o arquivo anterior existe antes de apaga-lo, o unlink, que o apagará, e o writeFile, que vai, a partir do novo caminho e do buffer, armazenar a nova imagem. Agora que nosso utilitário de compressão está a todo o vapor, basta executarmos na requisição do nosso POST, se o upload foi feito com **sucesso *(de maneira crua: se a propiedade req.file não for undefined).* Vamos então voltar até o nosso POST, importar o nosso utilitário, e executar ele! Tudo pronto! se tudo ocorreu corretamente, temos a nossa imagem recebida pelo post “substituída” pela nova versão comprimida e processada. Tem várias coisas que podem ser melhoradas no código, como por exemplo salvar o buffer por meio de stream, continuar a promise chain para deixar tudo async, trabalhar melhor com os erros, etc. Vou deixar isso para a individualidade do projeto de vocês,** o céu é o limite**! Se você chegou até aqui,** parabéns guerreiro! Espero que esse **artigo tenha o ajudado solucionar pelo menos um pouco dos seus problemas com upload e processamento de imagens com nodeJS. E se ajudou mesmo, não esquece de deixar um aplauso, clicado na mãozinha aí em cima, e deixando um feedback nos comentários! Se o código acima não deu certo no seu projeto, ocorreu algum bug ou você ficou alguma dúvida, vou ficar muito feliz em tentar ajudar nas minhas redes sociais! Chama no probleminha:2. Configurando o Multer
\nstorage
\nconst multer = require('multer');\n\n// Vamos expotar nosso módulo multer, o qual vamos executar passando as nossas configurações em um objeto.\nmodule.exports = (multer({\n \n // Como deve ser feito o armazenamento dos arquivos?\n storage: multer.diskStorage({\n \n // Qual deve ser o destino deles?\n destination: (req, file, cb) => {\n \n // Setamos o destino como segundo paramêtro do callback\n cb(null, './app/public/images');\n },\n \n // E como devem se chamar?\n filename: (req, file, cb) => {\n \n // Setamos o nome do arquivo que vai ser salvado no segundo paramêtro\n // Apenas concatenei a data atual com o nome original do arquivo, que a biblioteca nos disponibiliza.\n cb(null, Date.now().toString() + '-' + file.originalname);\n \n }\n \n }), // FIM DA CONFIGURAÇÃO DE ARMAZENAMENTO\n}));\n
\nfileFilter
\nconst multer = require('multer');\n\n // Os objetos e suas funções são automaticamentes executadas pela biblioteca, no momento do Upload.\n // Nessas funções, teremos acesso a requisição, a alguns dados do arquivo, e um callback que vamos\n\n// Vamos expotar nosso módulo multer, que vamos executar passando as nossas configurações\nmodule.exports = (multer({\n \n // Como deve ser feito o armazenamento dos arquivos?\n storage: multer.diskStorage({\n \n // Qual deve ser o destino deles?\n destination: (req, file, cb) => {\n \n // Setamos o destino como segundo paramêtro do callback\n cb(null, './app/public/images');\n },\n \n // E como devem se chamar?\n filename: (req, file, cb) => {\n \n // Setamos o nome do arquivo que vai ser salvado no segundo paramêtro\n // Apenas concatenei a data atual com o nome original do arquivo, que a biblioteca nos disponibiliza.\n cb(null, Date.now().toString() + '-' + file.originalname);\n\n }\n }),\n\n // Como esses arquivos serão filtrados, quais formatos são aceitos/esperados?\n fileFilter: (req, file, cb) => {\n \n // Procurando o formato do arquivo em um array com formatos aceitos\n \t // A função vai testar se algum dos formatos aceitos do ARRAY é igual ao formato do arquivo.\n const isAccepted = ['image/png', 'image/jpg', 'image/jpeg'].find( formatoAceito => formatoAceito == file.mimetype );\n\n // O formato do arquivo bateu com algum aceito?\n if(isAccepted){\n // Executamos o callback com o segundo argumento true (validação aceita)\n return cb(null, true);\n }\n \n // Se o arquivo não bateu com nenhum aceito, executamos o callback com o segundo valor false (validação falhouo)\n return cb(null, false);\n }\n}));\n
\n3. Multer em ação!
\nNosso GET:
\n// IMPORTAMOS NOSSO MIDDLEWARE\nconst multer = require('./app/middleware/multer');\n\n// ROTA PARA GET, RENDERIZAR O FORMULÁRIO\napp.get('/nova-imagem', (req, res, next) => {\n res.send(`\n <html>\n <head> \n <title> Nova imagem </title>\n </head>\n </body>\n <!-- O enctype é de extrema importância! Não funciona sem! -->\n <form action=\"/nova-imagem\" method=\"POST\" enctype=\"multipart/form-data\">\n <!-- O NAME do input deve ser exatamente igual ao especificado na rota -->\n <input type=\"file\" name=\"image\">\n <button type=\"submit\"> Enviar </button>\n </form>\n </body>\n </html>\n `);\n});\n
\nE O POST:
\n\n
\n// ROTA PARA POST, TRATAR O FORMULÁRIO\n// APLICAMOS O NOSSO MIDDLEWARE IMPORTADO PASSANDO O NAME DO INPUT A SER TRATADO\napp.post('/nova-imagem', multer.single('image'), (req, res, next) => {\n\n // Se houve sucesso no armazenamento\n if (req.file) {\n // Vamos imprimir na tela o objeto com os dados do arquivo armazenado\n return res.send(req.file);\n }\n\n // Se o objeto req.file for undefined, ou seja, não houve sucesso, vamos imprimir um erro!\n return res.send('Houve erro no upload!');\n\n});4. Criando nosso middleware de tratamento com Sharp
\nconst fs = require('fs'),\n sharp = require('sharp');\n \nexports.compressImage = (file, size) => {\n \n}const fs = require('fs'),\n sharp = require('sharp');\n \nexports.compressImage = (file, size) => {\n \n // Pegamos o PATH antigo e fazemos um tratamento com ele, para mudar a extensão do arquivo.\n const newPath = file.path.split('.')[0] + '.webp';\n \n return sharp(file.path) // Executamos o SHARP na imagem que queremos comprimir\n \n .resize(size) //Redimensionamos para o tamanho (se não receber esse parâmetro, não redimensiona\n \n .toFormat('webp') // Forçamos a conversão esse arquivo para webp\n \n .webp({ // Comprimimos, setando uma qualidade\n quality: 80\n })\n \n .toBuffer() // Transformamos esse arquivo em um Buffer\n \n .then(data => {\n // Temos o buffer disponível para tratamento\n }) \n}\n
\n\n
\nexports.compressImage = (file, size) => {\n const newPath = file.path.split('.')[0] + '.webp';\n\n return sharp(file.path)\n .resize(size)\n .toFormat('webp')\n .webp({\n quality: 80\n })\n .toBuffer()\n .then(data => {\n\n // Deletando o arquivo antigo\n // O fs.acess serve para testar se o arquivo realmente existe, evitando bugs\n fs.access(file.path, (err) => {\n\n // Um erro significa que a o arquivo não existe, então não tentamos apagar\n if (!err) {\n \n //Se não houve erros, tentamos apagar\n fs.unlink(file.path, err => {\n\n // Não quero que erros aqui parem todo o sistema, então só vou imprimir o erro, sem throw.\n if(err) console.log(err)\n })\n }\n });\n \n //Agora vamos armazenar esse buffer no novo caminho\n fs.writeFile(newPath, data, err => {\n if(err){\n // Já aqui um erro significa que o upload falhou, então é importante que o usuário saiba.\n throw err;\n }\n });\n\n // Se o código chegou até aqui, deu tudo certo, então vamos retornar o novo caminho\n return newPath;\n })\n}//Lembre-se de importar a nossa biblioteca no início do arquivo!\n//Ex: const filehelper = require('app/util/file-helper.js');\n\napp.post('/nova-imagem', multer.single('image'), (req, res, next) => {\n\n // Se houve sucesso no armazenamento\n if (req.file) {\n \n \t// Vamos mandar essa imagem para compressão antes de prosseguir\n // Ela vai retornar o a promise com o novo caminho como resultado, então continuamos com o then.\n flehelper.compressImage(req.file, 100)\n .then(newPath => {\n // Vamos continuar normalmente, exibindo o novo caminho\n return res.send(\"Upload e compressão realizados com sucesso! O novo caminho é:\" +newPath );\n })\n .catch(err => console.log(err) );\n }\n\n return res.send('Houve erro no upload!');\n});\n
\n