ASP .NET Core 3.1 - Upload de Imagens com Web API

Neste artigo veremos como realizar o upload de imagens em uma Web API na ASP .NET Core 3.1.

A ASP.NET Core nos oferece uma API poderosa e fácil de usar que é excelente para criar WEb APIs robustas no padrão REST.

Como exemplo iremos criar uma API RESTful usando o Visual Studio 2019 Community onde iremos realizar o upload de imagens para o servidor.

Existem diversos níveis de implementação para realizar esta tarefa e para começar eu vou usar uma abordagem bem simples criando um controlador ImagemController que vai permitir fazer o upload de imagens para uma pasta pré-definida no servidor.

'Bora' pro código...

Recursos :

Visual Studio 2019 Community
.NET Core 3.1

Criando o projeto no VS 2019 Community

Abra o VS 2019 Community e crie uma solução em branco via menu File-> New Project;

Selecione o template ASP .NET Core Web Application, e, Informe o nome Aspnet_UploadImagem.

A seguir selecione .NET Core e ASP .NET Core 3.1 e marque o template API e as configurações conforme figura abaixo:

Clicando no botão Create teremos o projeto criado.

Criando o controller ImagemController

Com o projeto criado remova o arquivo WeatherForecastController.cs da pasta Controllers e o arquivo WeatherForecast.cs da raiz do projeto.

Agora vamos criar um controlador ImagemController na pasta Controllers do projeto.

Clique com o botão direito do mouse sobre a pasta Controllers e selecione : Add->Controller;

Selecione a opção API Controller - Empty da janela do Scaffold e clique em Add;

Informe o nome ImagemController e clique em Add;

O Framework vai instalar o pacote Microsoft.VisualStudio.Web.CodeGeneration.Design para poder criar o controlador e isso vai demorar um pouco pois ele vai dar um build no projeto e fazer o Scaffold e gerar o controlador.

A seguir inclua o código abaixo no controlador:

using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System;
using System.IO;
using System.Threading.Tasks;

namespace AspNet_UploadImagem.Controllers
{
   [Route("api/[controller]")]
    [ApiController]
    public class ImagemController : ControllerBase
    {
       public static IWebHostEnvironment _environment;
        public ImagemController(IWebHostEnvironment environment)
        {
            _environment = environment;
        }

       [HttpGet]
        public string Get()
        {
            string texto = " Web API - ImagemController em execução : " + DateTime.Now.ToLongTimeString();
            texto += $"\n Ambiente : {_environment.EnvironmentName}";
            return texto;
        }

     [HttpPost("upload")]
       public async Task<string> EnviaArquivo([FromForm] IFormFile arquivo)
       {
          if (arquivo.Length > 0)
           {
               try
                {
                    if (!Directory.Exists(_environment.WebRootPath + "\\imagens\\"))
                    {
                        Directory.CreateDirectory(_environment.WebRootPath + "\\imagens\\");
                }
                using (FileStream filestream = System.IO.File.Create(_environment.WebRootPath + "\\imagens\\" + arquivo.FileName))
                {
                        await arquivo.CopyToAsync(filestream);
                        filestream.Flush();
                        return "\\imagens\\" + arquivo.FileName;
                    }
                }
                catch (Exception ex)
                {
                    return ex.ToString();
                }
            }
            else
            {
                return "Ocorreu uma falha no envio do arquivo...";
            }
        }
    }
}

Neste código temos a rota para acessar a API definida como : api/imagem

No construtor da classe injetamos uma instância de IWebHostEnvironment para poder acessar o ambiente.

A seguir definimos dois métodos Actions:

1 - HttpGet - Get : Apenas retorna a informação de que a API esta atendendo e o ambiente onde estamos trabalhando

2- HttPost("upload") - EnviaArquivo : Aqui definimos o arquivo a ser enviado como sendo do tipo IFormFile e a seguir verificamos se o arquivo possui um tamanho maior que zero e depois verificamos se a pasta imagens existe no servidor. Se ela não existir iremos criar esta pasta.

A seguir criamos o arquivo e copiamos o conteúdo do arquivo enviado para o servidor.

Testando a API com o Postman

Podemos realizar o teste e vamos usar o Postman.

Para instalar o Postman acesse esse link : https://www.getpostman.com/apps ou abra o Google Chrome e digite postam e a seguir clique no link: Postman - Chrome Web Store

Na janela que será aberta clique no botão - Usar no Chrome:

A seguir registre uma conta e faça o login.

Pronto ! Já podemos usar o Postman.

Antes de executar temos que ajustar a configuração do projeto para acionar a rota padrão.

Abra o projeto e na janela de propriedades do projeto defina na guia Debug o valor para : Launch browser como : api/imagem

Agora vamos executar o projeto e se a API estiver em atendimento iremos obter no navegador o resultado abaixo:

Agora abra o Postman e defina uma requisição com os seguintes dados:

POST
https://localhost:44337/api/imagem/upload
Body
form-data : arquivo pipocabsb.jpg

Ao clicar em Send iremos obter como retono : \imagens\pipocabsb.jpg (status : 200 Ok)

Podemos verificar a imagem na pasta wwwroot/imagens do projeto:

Voilá... Temos nossa imagem enviada para o servidor com sucesso pela nossa Web API.

Nossa implementação funciona mas ela é muito 'tosca' e pode ser melhorada em diversos aspectos.

Veremos isso em outro artigo.

Pegue o projeto (sem as referências) aqui : AspNet_UploadImagem.zip

"Vós me chamais Mestre e Senhor, e dizeis bem, porque eu o sou.
Ora, se eu, Senhor e Mestre, vos lavei os pés, vós deveis também lavar os pés uns aos outros.
Porque eu vos dei o exemplo, para que, como eu vos fiz, façais vós também."
João 13:13-15

Referências:

José Carlos Macoratti