以 axios.post 形式接收 asp.net core web api 中的数组答案

【问题标题】：Receiving arrays in asp.net core web api form axios.post以 axios.post 形式接收 asp.net core web api 中的数组
【发布时间】：2022-01-02 02:40:06
【问题描述】：

例如，我有这段代码，它将数据发送到 asp.net core 6 web api 控制器。

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 是我从<input type="file"/> 收到的照片。

我通过在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);

如何处理包含数组的发布请求？我需要在MyController.cs中使用什么样的类和函数？

【问题讨论】：

标签： javascript c# arrays asp.net-core axios

【解决方案1】：

在编码之前，你需要了解以下知识：

formData 键名应与模型属性名匹配。
模型属性应该是 List 或 Array。
formData.append("PhotoNames", ["name1", "name2", "name3"]); 通过 FormData 而不是列表项将一项发布到列表中。你需要像下面这样的帖子：
```
 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; }
}

查看：

<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   
    }
}

结果：

【讨论】：

【解决方案2】：

尝试将 PhotoNames 和 Photos 表单数据设为数组

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

【讨论】：

@Killsan 是的。 ...