ASP.NET Web API POST方法：如何提交含图片的多表单数据列表？

你当前的嵌套List+IFormFile的DTO结构，Swagger确实没法很好支持批量输入，因为它无法自动生成多组带文件的表单项。给你几个实用的解决办法：

ASP.NET Core本身支持索引式的form-data绑定，你可以让前端（或在Swagger里手动）按照IdeaCards[0].Content、IdeaCards[0].Image、IdeaCards[1].Content、IdeaCards[1].Image这样的格式提交数据，后台的模型绑定能自动解析到你的BulkCreateIdeaCardsDTO里。

但Swagger不会自动生成这些字段，需要手动在Swagger的form-data区域添加键值对：

• 键：IdeaCards[0].Content，值类型选text，输入卡片内容
• 键：IdeaCards[0].Image，值类型选file，上传对应图片
• 键：IdeaCards[1].Content，值类型选text，输入下一张卡片内容
• 键：IdeaCards[1].Image，值类型选file，上传对应图片

这种方式不需要修改后台代码，只需前端按规则提交即可。

修改DTO结构，把卡片的文本内容用JSON字符串传递，文件单独作为列表上传，后台再手动关联两者：

public class BulkCreateIdeaCardsDTO
{
    public string CardsContent { get; set; } // 存储List<CreateIdeaCardTextDTO>的JSON字符串
    public List<IFormFile> Images { get; set; }
}

public class CreateIdeaCardTextDTO
{
    public string Content { get; set; }
    public int? ImageIndex { get; set; } // 对应Images列表的索引，null表示无图片
}

后台处理代码示例：

[HttpPost("bulk-create")]
public async Task<IActionResult> BulkCreate([FromForm] BulkCreateIdeaCardsDTO ideaCardsDTO)
{
    var cardTexts = JsonSerializer.Deserialize<List<CreateIdeaCardTextDTO>>(ideaCardsDTO.CardsContent);
    // 根据ImageIndex将Images中的文件与卡片文本关联
    foreach(var cardText in cardTexts)
    {
        var image = cardText.ImageIndex.HasValue ? ideaCardsDTO.Images[cardText.ImageIndex.Value] : null;
        // 处理单张卡片逻辑
    }
    // ...
}

这种方式Swagger能完美支持：一个文本框输入JSON格式的卡片文本，一个文件上传框支持多选或多次添加图片。

如果不想修改现有DTO，可以直接在Action里手动读取请求内容，自定义解析逻辑：

[HttpPost("bulk-create")]
public async Task<IActionResult> BulkCreate()
{
    if (!Request.HasFormContentType)
    {
        return BadRequest("请求类型错误");
    }

    var form = await Request.ReadFormAsync();
    var ideaCards = new List<CreateIdeaCardDTO>();

    // 按自定义命名规则遍历表单数据，比如card_0_content、card_0_image
    int index = 0;
    while (true)
    {
        var contentKey = $"card_{index}_content";
        var imageKey = $"card_{index}_image";
        
        if (!form.ContainsKey(contentKey))
            break;

        var content = form[contentKey];
        var image = form.Files.GetFile(imageKey);

        ideaCards.Add(new CreateIdeaCardDTO
        {
            Content = content,
            Image = image
        });

        index++;
    }

    // 后续批量创建逻辑
    // ...
}

这种方式灵活性极高，但需要前端严格按照约定的命名规则提交数据。

如果你的卡片图片都是小尺寸，可以把图片转成Base64字符串，直接放到JSON里提交，无需使用form-data：

public class CreateIdeaCardDTO
{
    public string Content { get; set; }
    public string? ImageBase64 { get; set; } // Base64编码的图片字符串
}

public class BulkCreateIdeaCardsDTO
{
    public List<CreateIdeaCardDTO> IdeaCards { get; set; }
}

Action改成使用[FromBody]接收JSON：

[HttpPost("bulk-create")]
public async Task<IActionResult> BulkCreate([FromBody] BulkCreateIdeaCardsDTO ideaCardsDTO)
{
    // 将Base64字符串转换为文件流或直接保存
    foreach(var card in ideaCardsDTO.IdeaCards)
    {
        if(!string.IsNullOrEmpty(card.ImageBase64))
        {
            var imageBytes = Convert.FromBase64String(card.ImageBase64);
            // 处理图片逻辑
        }
    }
    // ...
}

这种方式Swagger能完美支持批量输入，但大图片会导致请求体过大，不建议用于大图场景。

内容的提问来源于stack exchange，提问作者Tran Duc Hung K17 HL