0

Estou com dificuldades em passar um array para uma controller via Axios.

Exemplo do código WEBAPI Controller:

    [HttpGet]
    [ActionName("openshape")]
    [Route("api/shape/openshape")]
    public IEnumerable<Fields> OpenShape(FileOpen[] path)
    

Quando eu mando a requisição no React ela chega null na WEBAPI.

Exemplo do método no React:

var  path = []; 
var ListSelect = Object.assign([], e.target.files); 


for(var i = 0; i < ListSelect.length; i++){
  let result = { data:'', fileName:''}
  var reader = new FileReader(); 
  reader.readAsDataURL(ListSelect[i]); 
  reader.onload = e => { 
    result.data = e.target.result.toString();  
  }
    
  result.fileName = ListSelect[i].name; 

  path.push(result); 
}

let obj = await api.get("/shape/openshape/", {params: {path: path}})

Exemplo da classe FileOpen:

public class FileOpen
{
    public string Data { get; set; }
    public string fileName { get; set; }
}

1 Resposta 1

0

A requisição que está tentando realizar é um GET e requisições GET semanticamente não possuem body, ou seja, não recebem objetos complexos no corpo da requisição.

O que você pode fazer é alterar o método para POST ou PUT para resolver o problema, porém existe uma questão que deve ser avaliada que é o contexto da requisição se ela é uma requisição que vai enviar dados os métodos POST e PUT resolvem, porém se é uma requisição que busca informações, deve se avaliar outras alternativas:

Receber no Controller um parâmetro via QueryString e convertendo a String para um array. Ou seja, ao invés de mandar o objeto no data da requisição, vc mandaria um JSON como string via parâmetro da requisição, receberia este JSON no Controller e converteria este JSON em um array de objetos. Abaixo um exemplo:

 [HttpGet]
 [ActionName("openshape")]
 [Route("api/shape/openshape")]
 public IEnumerable<Fields> OpenShape([FromUri] string path) {
   FileOpen[] paths = JsonConvert.DeserializeObject<FileOpen[]>(path);
 }

No React:

var  path = []; 
var ListSelect = Object.assign([], e.target.files); 

for(var i = 0; i < ListSelect.length; i++){
  let result = { data:'', fileName:''}
  var reader = new FileReader(); 
  reader.readAsDataURL(ListSelect[i]); 
  reader.onload = e => { 
    result.data = e.target.result.toString();  
  }
    
  result.fileName = ListSelect[i].name; 

  path.push(result); 
}

let pathStr = JSON.stringify(path);

let obj = await api.get("/shape/openshape/", {params: {path: pathStr}})
3
  • Deu certo, porém agora o erro fica na conversão do array para JSON. O Valor do result.data está retornando nulo.
    – user164319
    20/01/2021 às 16:30
  • 1
    o problema pode ser por culpa da identação do conteudo do Json, dê uma olhada na documentação em newtonsoft.com/json/help/html/NamingStrategyCamelCase.htm 21/01/2021 às 16:27
  • 1
    Consegui arrumar. O problema estava na hora da leitura do reader.onload, pois ele carrega os dados mas depois que eu adiciono ele na lista os valores desaparece magicamente kkkkk então eu mudei a estrutura, deixando o usuário fazer o upload dos dois arquivos manualmente um de cada vez.
    – user164319
    27/01/2021 às 12:21

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