如何向ASP.NET Core Web API传递含图片的自定义对象列表？

我定义了如下类：

public class UploadImageData
{
    public IFormFile Image { get; set; }

    public string ImageUId { get; set; }
    public string Label { get; set; }
    public string Name { get; set; }
}

我的UI中有一个图片块（包含多张图片），每条记录都包含Image、Name、Label和ImageUid。我想要向ASP.NET Core Web API传递一个UploadImageData类型的自定义对象列表，采用FromForm方式传递，但未达预期效果：无法获取图片文件，整个块被作为multipart/form-data参数传递。我尝试的API代码如下：

public async Task<IActionResult> UploadImage([FromForm] List<UploadImageData> uploadImageInput)

请问该如何正确传递List<UploadImageData>到ASP.NET Core Web API？

要通过multipart/form-data正确传递包含文件的对象列表，需遵循ASP.NET Core的表单绑定规则，具体操作如下：

1. 遵循索引式参数命名规则 #

ASP.NET Core绑定列表类型表单数据时，必须用索引式命名标识列表中每个元素的属性，格式为：
uploadImageInput[索引值].属性名

比如传递2条UploadImageData数据，表单参数需按以下命名：

• 第一条数据：
  • uploadImageInput[0].Image：对应第一个文件
  • uploadImageInput[0].ImageUId：对应第一条数据的ImageUId字符串
  • uploadImageInput[0].Label：对应第一条数据的Label字符串
  • uploadImageInput[0].Name：对应第一条数据的Name字符串
• 第二条数据：
  • uploadImageInput[1].Image：对应第二个文件
  • uploadImageInput[1].ImageUId：对应第二条数据的ImageUId字符串
  • uploadImageInput[1].Label：对应第二条数据的Label字符串
  • uploadImageInput[1].Name：对应第二条数据的Name字符串

2. 前端请求示例（JavaScript/Fetch） #

用原生Fetch发送请求时，需按上述规则构建FormData对象：

const formData = new FormData();

// 添加第一条图片数据
formData.append('uploadImageInput[0].Image', file1, file1.name);
formData.append('uploadImageInput[0].ImageUId', 'uid-1');
formData.append('uploadImageInput[0].Label', '标签1');
formData.append('uploadImageInput[0].Name', '图片1');

// 添加第二条图片数据
formData.append('uploadImageInput[1].Image', file2, file2.name);
formData.append('uploadImageInput[1].ImageUId', 'uid-2');
formData.append('uploadImageInput[1].Label', '标签2');
formData.append('uploadImageInput[1].Name', '图片2');

// 发送请求
fetch('/api/UploadImage', {
  method: 'POST',
  body: formData
});

3. 后端API无需修改 #

你原本的API代码可以保持不变，只要前端参数命名符合规则，ASP.NET Core会自动绑定到List<UploadImageData>：

public async Task<IActionResult> UploadImage([FromForm] List<UploadImageData> uploadImageInput)
{
    // 处理上传的图片和数据
    foreach(var item in uploadImageInput)
    {
        if(item.Image != null)
        {
            // 保存文件或其他业务逻辑
        }
    }
    return Ok();
}

关键注意事项 #

• 索引值必须从0开始连续递增，不能跳过
• 文件参数的append方法需传入文件对象，第三个参数为可选文件名
• 无需手动设置请求的Content-Type为multipart/form-data，Fetch会自动处理

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