Inquiridor
Enviado foto para backend

Pergunta
-
Temos um projeto onde o cliente ira usar o frontend e tirar uma foto de seu celular e envia-la para nossa web.api.
Do lado da Web.api, como recebo este parametro (foto) ?
Sera um caminho da imagem (path) OU sera o arquivo da imagem propriamente dito ?
Como isso funciona ?Abracos
Todas as Respostas
-
Olá,
Pode utilizar o MultipartFormDataProvider:
Veja a documentação:
https://docs.microsoft.com/en-us/aspnet/web-api/overview/advanced/sending-html-form-data-part-2
Aqui também:
https://jamessdixon.wordpress.com/2013/10/01/handling-images-in-webapi/
Eu particularmente utilizo uma propriedade byte[] e na View eu transformo a imagem em base64String e alimento no JSON... Funciona bem também.
Att,
Fabio Rosa.
-
Você pode fazer da seguinte maneira.
- Pega a foto no frontend e transforma em base64
<div class="form-group"> <label for="exampleFormControlFile1">Obter imagem</label> <input type="file" class="form-control-file" id="exampleFormControlFile1" onchange="handleFileInput(event.target.files)"> </div> <span id="base64Content"></span>
function handleFileInput(files) { var fileToUpload = files.item(0); var reader = new FileReader(); var fileData = {}; reader.readAsDataURL(fileToUpload); reader.onload = () => { fileData.name = fileToUpload.name; fileData.type = fileToUpload.type; fileData.value = reader.result.split(",")[1] $('#base64Content').html(fileData.value); }; }
Envia esse objeto ao WebApi e você pode salvar aonde bem entender. Código para salvar no Blob do Azure
[HttpPost] [Route("upload-picture")] public async Task<IActionResult> UploadFile([FromBody] FileUpload file) { if (!file.fileType.Contains("image")) { return BadRequest("Invalid filetype"); } var container = await GetBlobContainer(); var newPicture = await Upload(file, container); // Url da imagem return Ok(newPicture.StorageUri.PrimaryUri.AbsoluteUri); } private async Task<CloudBlobContainer> GetBlobContainer() { var storageCredentials = new StorageCredentials("**Usuario**", "**Senha**"); var cloudStorageAccount = new CloudStorageAccount(storageCredentials, true); var cloudBlobClient = cloudStorageAccount.CreateCloudBlobClient(); var container = cloudBlobClient.GetContainerReference("images"); await container.CreateIfNotExistsAsync(); return container; } private static async Task<CloudBlockBlob> Upload(FileUpload file, CloudBlobContainer container) { // Upload the new one. var newImageName = Guid.NewGuid() + file.fileType.Replace("image/", "."); var newPicture = container.GetBlockBlobReference(newImageName); byte[] imageBytes = Convert.FromBase64String(file.value); newPicture.Properties.ContentType = file.fileType; //.Replace("image/", ""); await newPicture.UploadFromByteArrayAsync(imageBytes, 0, imageBytes.Length); return newPicture; } public class FileUpload { public string filename { get; set; } public string fileType { get; set; } public string value { get; set; } }
Você vai precisar da referencia do WindowsAzure.Storage, disponível no Nuget
Espero ter ajudado! Se consegui, não esquece de marcar no fórum como útil! Obrigado :)
#fullstack dev - MCSA, MCTS and actually blogging at www.saindodacaixinha.com.br
- Editado Bruno Brito quinta-feira, 12 de julho de 2018 19:31