none
Enviado foto para backend RRS feed

  • 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

    quinta-feira, 12 de julho de 2018 17:22

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.

    quinta-feira, 12 de julho de 2018 18:52
  • Você pode fazer da seguinte maneira.

    1. 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
    quinta-feira, 12 de julho de 2018 19:29