ASP.NET Core Web API如何接收axios.post提交的数组类型参数

1. 修正前端请求代码 #

FormData 不支持直接传递数组对象，你需要将数组中的元素逐个追加到FormData中，使用相同的键名即可：

const formData = new FormData();
formData.append("Id", 1);
// 逐个追加照片名数组
const photoNames = ["name1", "name2", "name3"];
photoNames.forEach(name => formData.append("PhotoNames", name));
// 逐个追加照片文件数组
const photos = [file1, file2, file3];
photos.forEach(file => formData.append("Photos", file));
axios.post("/api/MyController", formData);

2. 定义后端接收模型 #

将原来的单值属性修改为集合类型，属性名要和前端传递的键名保持一致：

public class ImageModel
{
    public int Id { get; set; }
    // 对应前端的PhotoNames数组
    public List<string> PhotoNames { get; set; }
    // 对应前端的Photos文件数组
    public List<IFormFile> Photos { get; set; }
}

3. 编写控制器接收方法 #

接收逻辑和之前的单值场景基本一致，直接用[FromForm]绑定上面定义的模型即可：

[HttpPost]
public IActionResult Post([FromForm] ImageModel model)
{
    // 可直接使用model中的数据
    // 例：遍历所有照片
    for (int i = 0; i < model.Photos.Count; i++)
    {
        var fileName = model.PhotoNames[i];
        var file = model.Photos[i];
        // 你的业务逻辑
    }
    return Ok();
}

注意事项 #

• 确保前端数组元素追加时使用的键名和后端模型属性名完全匹配（ASP.NET Core 绑定不区分大小写，但建议保持一致避免出错）
• 可根据业务需要给模型属性加上数据验证注解，比如[Required]、[Range]等
• 可以在处理前先校验PhotoNames和Photos的长度是否一致，避免索引不匹配的问题

内容的提问来源于stack exchange，提问作者Killsan