No artigo passado comentei sobre os motivos para se fazer upload de imagem para o Azure, bem como uma implementação da mesma utilizando C#. Neste artigo vou abordar o envio de imagens para o Azure Storage novamente, porém utilizando JavaScript (Node).
IMPORTANTE: Não utilize este tutorial para envio de imagens direto do Frontend, ou seja, não deixe nada disso no seu App Angular, React, Vue ou o quer que seja, mantenha isto no Backend. O motivo deste cuidado é que precisaremos da Connection String para nosso Storage e deixar isto no Front é tornar fácil o acesso a esta informação.
Para este exemplo, estou usando uma API básica criada com o Express, se quiser, pode iniciar seu projeto com este comando:
npm install –g express-generator
express minhaapi –no-view
cd minhaapi
npm install
Isto vai gerar um projeto apenas API, em adicional, vamos criar um controlador (controllers/controller.js) com o seguinte método:
exports.uploadImage = async (req, res, next) => {
// TODO
}
Para finalizar vamos para o arquivo de rotas (routes/index.js) e criar uma nova rota para o método POST apontando para o controlador que criamos:
var express = require('express');
var router = express.Router();
const controller = require('../controllers/controller');
/* GET home page. */
router.get('/', function (req, res, next) {
res.render('index', {
title: 'Express'
});
});
router.post('/', controller.uploadImage);
module.exports = router;
Para este caso, vamos utilizar uma lib do Azure (Sim, tem pronto) para facilitar. O time do Azure disponibiliza pacotes para diferentes linguagens, se engana quem acha que é apenas para .NET.
Neste caso vamos utilizar o pacote chamado azure-storage, que pode ser instalado pelo seguinte comando:
npm install azure-storage –save
Isto é tudo que precisamos do Azure para fazer upload das nossas imagens.
Em adicional, para gerar nomes aleatórios eu uso sempre o GUID, e tem um pacote que recomendo que é o UUID:
npm install uuid –save
O primeiro passo é importar os módulos do Azure e UUID que vamos precisar para trabalhar, e insto é feito no topo do nosso controlador, desta forma:
const uuid = require('uuid/v1');
const azure = require('azure-storage');
exports.uploadImage = async (req, res, next) => {
// TODO
}
A primeira coisa que precisamos para enviar um arquivo para o Azure e a referência de um Blob/Container, e para isto precisamos antes de uma chave de acesso que pode ser obtida no portal do Azure na opção Azure Storage > Seu Storage > Access Keys.
Com a chave em mãos, vamos criar o objeto de refência que vai permitir a transferência da imagem:
const uuid = require('uuid/v1');
const azure = require('azure-storage');
exports.uploadImage = async (req, res, next) => {
const blobSvc = azure.createBlobService("SEU ACCESS KEY");
}
Nossa imagem chegará no formato Base64 e este será divido em duas partes, sendo a primeira o tipo da imagem e a segunda a imagem em si.
Além disso precisamos gerar um nome único para esta imagem para não ter problemas de conflito. Desta forma nosso código fica assim:
const uuid = require('uuid/v1');
const azure = require('azure-storage');
exports.uploadImage = async (req, res, next) => {
const blobSvc = azure.createBlobService("SEU ACCESS KEY");
// Gera um nome único para o arquivo
let filename = uuid().toString() + '.jpg';
// Obtem a imagem em base64 do corpo da requisição
let rawdata = req.body.image;
// Separa a hash recebida em duas partes
let matches = rawdata.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/);
// Obtém o tipo da imagem
let type = matches[1];
// Obtém a imagem em si
let buffer = new Buffer(matches[2], 'base64');
}
Com tudo pronto, podemos usar o método CreateBlockBlobFromText do pacote do Azure Storage para fazer upload de uma imagem no formato Base64 para o servidor.
Neste caso estou utilizando Async/Await (Não esqueça do Try/Catch) para aguardar a execução do método, e caso algo dê errado, eu simplesmente defino o nome do arquivo como padrão.
Isto é apenas para o exemplo e precisa ser melhorado no seu código, OK?
const uuid = require('uuid/v1');
const azure = require('azure-storage');
exports.uploadImage = async (req, res, next) => {
const blobSvc = azure.createBlobService("SEU ACCESS KEY");
// Gera um nome único para o arquivo
let filename = uuid().toString() + '.jpg';
// Obtem a imagem em base64 do corpo da requisição
let rawdata = req.body.image;
// Separa a hash recebida em duas partes
let matches = rawdata.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/);
// Obtém o tipo da imagem
let type = matches[1];
// Obtém a imagem em sí
let buffer = new Buffer(matches[2], 'base64');
// Salva a imagem
await blobSvc.createBlockBlobFromText('SEUCONTAINER', filename, buffer, {
contentType: type
}, function (error, result, response) {
if (error) {
filename = 'default.png'
}
});
}
Se tudo deu certo, basta retornarmos a URL da imagem na resposta, como mostrado abaixo, que também demonstra nossa versão final do controlador.
const uuid = require('uuid/v1');
const azure = require('azure-storage');
exports.uploadImage = async (req, res, next) => {
const blobSvc = azure.createBlobService("SEU ACCESS KEY");
// Gera um nome único para o arquivo
let filename = uuid().toString() + '.jpg';
// Obtem a imagem em base64 do corpo da requisição
let rawdata = req.body.image;
// Separa a hash recebida em duas partes
let matches = rawdata.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/);
// Obtém o tipo da imagem
let type = matches[1];
// Obtém a imagem em sí
let buffer = new Buffer(matches[2], 'base64');
// Salva a imagem
await blobSvc.createBlockBlobFromText('SEUCONTAINER', filename, buffer, {
contentType: type
}, function (error, result, response) {
if (error) {
filename = 'default.png'
}
});
const fileUrl = `https://SEUSTORAGE.blob.core.windows.net/SEUCONTAINER/${filename}`;
return res.status(200).json({
url: fileUrl
});
}
Este artigo atualmente utiliza a versão 5.0.0-rc.1 do ASP.NET/.NET, o que significa que ainda não...
Saiba como manter seu código limpo (Clean Code) seguindo algumas práticas sugeridas pelo Robert C...
Git é um sistema de controle de versões distribuídas, enquanto GitHub é uma plataforma que tem o ...
O Visual Studio Code é um editor de código criado pela Microsoft e que tem uma grande adoção pela...
O Angular nos fornece um esquema de rotas e navegação completo, simples e fácil de utilizar.
Me dedico ao desenvolvimento de software desde 2003, sendo minha maior especialidade o Desenvolvimento Web. Durante esta jornada pude trabalhar presencialmente aqui no Brasil e Estados Unidos, atender remotamente times da ?ndia, Inglaterra e Holanda, receber 8x Microsoft MVP e realizar diversas consultorias em empresas e projetos de todos os tamanhos.
Aulas disponíveis
horas de conteúdo
Alunos matriculados
Certificados emitidos
Temos mais de 16 cursos totalmente de graça e todos com certificado de conclusão.
Prefere algo mais Premium?
Compra única, parcelada em até
12x no cartão de crédito
Cobrado mensalmente via
cartão de crédito
Precisa de ajuda?
Sim! Basta criar sua conta gratuita no balta.io e começar seus estudos. Nós contamos com diversos cursos TOTALMENTE gratuitos e com certificado de conclusão.
Nós temos cursos gratuitos e pagos, porém você não precisa informar nenhum dado de pagamento
para começar seus estudos gratuitamente conosco. Os cursos gratuitos são completos e com
certificado de conclusão, você não paga nada por eles.
Porém, caso queira algo mais Premium,
você terá acesso à diversos benefícios que vão te ajudar ainda mais em sua carreira.
Siga SEMPRE as nossas Carreiras, elas vão te orientar em todos
os sentidos. Os cursos já estão organizados em categorias e carreiras para facilitar seu
aprendizado.
Nossa sugestão para aprendizado é começar pelo Backend e seguindo para Frontend e Mobile.
Nenhum curso no mundo vai te ensinar tudo, desculpa ser sincero! Os cursos são uma base, eles fornecem por volta de 30% do que você precisa aprender, o resto é com você, com dedicação e MUITA prática.
Java ou .NET? Angular ou React? Xamarin ou Flutter? A resposta é simples e direta: "Você já sabe
o básico?"
Se você ainda não sabe BEM o básico, ou seja, os fundamentos, OOP, SOLID, Clean Code, está
perdendo tempo estudando Frameworks ou até coisas mais avançadas como Docker. Foque nos seus
objetivos primeiro.
Agora se você está indeciso sobre qual Framework estudar, a boa notícia é que o mercado neste
momento está bem aquecido e você tem várias oportunidade. Desta forma o que levaríamos em conta
para tomar esta decisão seria:
Com certeza! O primeiro passo é começar e você pode fazer isto agora mesmo!
Começar de
graça
Receba em primeira mão todas as nossas novidades.