0


Estou com um problema no upload de arquivos usando Angular 7 para API escrita em c# Asp Core 2.1. Procurando na web achei vários de exemplos upload do arquivo apenas, porém preciso fazer o upload de arquivo e no mesmo request passar outros dados preenchidos pelo usuário. Criei uma model afim de receber esses dados digitados pelo usuário:

public class MinhaViewModel{

   public int UsuarioId { get; set; }

   public string Descricao { get; set; }
}

E a action que deverá receber os dados digitado e o arquivo ficou assim:

[HttpPost]
[Route("Publicar")]
public async Task<IActionResult> PostDocumentoUsuario([FromForm] MinhaViewModel viewModel, IFormFile file){
    //save file to path and viewModel to database
}

Já no Angular escrevi o seguinte código:

publicaArquivoUsuario(dadosUsuario):Observable<any>{
   var data  = new FormData();
   data.append('usuarioId', dadosUsuario.usuarioId);
   data.append('descricao', dadosUsuario.descricao);
   data.append('file', dadosUsuario.file); //dadosUsuario.file é do tipo File

   return this.http.post("urlApi", data, httpOptions);
}

Usando a interface do Swagger o request funciona bem, mas fazendo o request pelo Angular sempre tenho como retorno Erro 500, sendo que a action não é chamada. Já especifiquei no cabeçalho da requisição 'Content-Type':'multipart/form-data'.

1 Resposta 1

0

Eu uso o ng2-file-upload (https://github.com/valor-software/ng2-file-upload), porém acredito que você precise colocar tudo no mesmo model, veja meu exemplo:

Enviado o arquivo e os dados adicionais (usando o ng2-file-upload, porém é mesma coisa do seu código):

  this.uploader.onBuildItemForm = (fileItem: any, form: any)=>{
        form.append('teste1', 'texto teste 1');
        form.append('teste2', 'texto teste 2');
        return {fileItem, form};
    }

Front-End:

inserir a descrição da imagem aqui

Recebendo no backend:

    [Route("TesteUpload")]
    [HttpPost()]
    public async Task<IActionResult> TesteUpload([FromForm]Modal modal)
    {
        SendPreProposalCommand cmd = new SendPreProposalCommand(modal.file.FileName, Path.GetExtension(modal.file.FileName), modal.file);
        return await _mediator.Send(cmd) ? (IActionResult)Ok() : BadRequest();

    }

    public class Modal {
        public string Teste1 { get; set; }
        public string Teste2 { get; set; }
        public IFormFile file { get; set; }
    }

Watch:

inserir a descrição da imagem aqui

No seu caso basta mudar o back-end para:

Model:

public class MinhaViewModel{

   public int UsuarioId { get; set; }

   public string Descricao { get; set; }

   public IFormFile file { get; set; }
}

Action:

[HttpPost]
[Route("Publicar")]
public async Task<IActionResult> PostDocumentoUsuario([FromForm] MinhaViewModel viewModel){
    //save file to path and viewModel to database
}
3
  • Este trecho de código this.uploader.onBuildItemForm... ficou em que parte do código? No construtor da component? 31/05/2019 às 13:40
  • Isso é o plugin (ng2-file-uploader) do angular para enviar no post do arquivo. Seria o seu publicaArquivoUsuario, no seu caso só precisa adicionar o IFormFile como uma propriedade dentro da sua "MInhaViewModel" que acredito que já resolva.
    – Rafael
    1/06/2019 às 14:09
  • Editei a resposta, vê se ajuda. :)
    – Rafael
    1/06/2019 às 14:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .