Блог

Например, у меня есть этот код, который отправляет данные в asp.net контроллер веб-api ядра 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 это фотографии, которые я получил по форме lt;input type="file"/gt; .

Я обработал тот же запрос, но без массивов, используя этот код в 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  }  

Запрос выглядел так:

 const formData = new FormData(); formData.append("Id", 1); formData.append("PhotoName", "name1"); formData.append("Photo", file1); axios.post("/api/MyController", formData);  

Как я могу обработать запрос post с массивами в нем? В каком классе и функции мне нужно использовать MyController.cs ?

Перед кодированием вам необходимо знать следующие знания:

• Имя ключа FormData должно совпадать с именем свойства модели.
• Свойство модели должно быть списком или массивом.
• formData.append("PhotoNames", ["name1", "name2", "name3"]); разместите один элемент в списке по данным формы вместо элемента списка. Вам нужен пост, как показано ниже:

   formData.append("PhotoName", "name1");  formData.append("PhotoName", "name2");  formData.append("PhotoName", "name3");  

Вот целая рабочая демонстрация, за которой вы могли бы следить:

Модель:

 public class ImageModel {  public int Id { get; set; }  public string[] PhotoName { get; set; }  public IFormFile[] Photo { get; set; } }  

Вид:

 lt;input type="file" multiple name="FileList" /gt; @section Scripts {  lt;script src="https://unpkg.com/axios/dist/axios.min.js"gt;lt;/scriptgt;  lt;scriptgt;  $("input[name='FileList']").change(function () {  const formData = new FormData();   $("input[name='FileList']").each(function () {  var ReadyToUpload = $(this)[0].files;  if (ReadyToUpload.length gt; 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);    })   lt;/scriptgt; }  

API:

 [ApiController] [Route("api/[controller]")] public class WeatherForecastController : ControllerBase {   [HttpPost]  public void Post([FromForm] ImageModel file)  {  //Using all the data from the request here   } }  

Результат:

попробуйте сделать имена фотографий и фотографии из данных в виде массива

 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);