0
543
ViewsRecibir matrices en asp.net core web api desde axios.post
Por ejemplo, tengo este código, que envía datos al controlador web api de asp.net core 6.
const formData = new FormData(); formData.append("Id", 1); formData.append("PhotoNames", ["name1", "name2", "name3"]); formData.append("Photos", [file1, file2, file3)]; axios.post("/api/MyController", formData); file1, file2, file3 son las fotos que recibí <input type="file"/> .
Manejé la misma solicitud, pero sin arreglos, usando este código en MyController.cs :
public class Item { public int Id { get; set; } public string PhotoName{ get; set; } public IFormFile Photo { get; set; } } [HttpPost] public IActionResult Post([FromForm] ImageModel file) { //Using all the data from the request here }La solicitud parecía:
const formData = new FormData(); formData.append("Id", 1); formData.append("PhotoName", "name1"); formData.append("Photo", file1); axios.post("/api/MyController", formData); ¿Cómo puedo manejar la solicitud de publicación con matrices en ella? ¿Qué tipo de clase y función necesito usar en MyController.cs ?
2 answers
Answer question0
Antes de codificar, necesita tener los siguientes conocimientos:
El nombre de la clave formData debe coincidir con el nombre de la propiedad del modelo.
La propiedad del modelo debe ser una Lista o una Matriz.
formData.append("PhotoNames", ["name1", "name2", "name3"]);publicar un elemento en la Lista por FormData en lugar de un elemento de lista. Necesitas una publicación como la siguiente:formData.append("PhotoName", "name1"); formData.append("PhotoName", "name2"); formData.append("PhotoName", "name3");
Aquí hay una demostración completa que puede seguir:
Modelo:
public class ImageModel { public int Id { get; set; } public string[] PhotoName { get; set; } public IFormFile[] Photo { get; set; } }Vista:
<input type="file" multiple name="FileList" /> @section Scripts { <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> $("input[name='FileList']").change(function () { const formData = new FormData(); $("input[name='FileList']").each(function () { var ReadyToUpload = $(this)[0].files; if (ReadyToUpload.length > 0) { $.each(ReadyToUpload, function (i, file) { formData.append("Photo", file); }); } }); formData.append("Id", 1); formData.append("PhotoName", "name1"); formData.append("PhotoName", "name2"); formData.append("PhotoName", "name3"); //formData.append("Photos", [file1, file2, file3)]; axios.post("https://localhost:44397/api/WeatherForecast", formData); }) </script> }API:
[ApiController] [Route("api/[controller]")] public class WeatherForecastController : ControllerBase { [HttpPost] public void Post([FromForm] ImageModel file) { //Using all the data from the request here } }Resultado:
0
intente hacer que PhotoNames y Photos formen datos en una matriz
const formData = new FormData(); formData.append("Id", 1); formData.append("PhotoNames[]", ["name1", "name2", "name3"]); formData.append("Photos[]", [file1, file2, file3)]; axios.post("/api/MyController", formData);