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

Posted 2023-04-12

【中文标题】以 axios.post 形式接收 asp.net core web api 中的数组

【英文标题】：Receiving arrays in asp.net core web api form axios.post

【发布时间】：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中使用什么样的类和函数？

【参考方案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 是的。 ...