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
});
}