如何实现多文件上传（IEnumerable<IFormFile>）及API模型绑定？

针对你遇到的多文件上传并携带附加信息的模型绑定问题，直接给你可行的实现方案：

后端Action调整 #

首先确保你的POST Action使用[FromForm]特性标记模型参数——混合文件和文本字段的请求属于表单数据（multipart/form-data），而非纯JSON，显式标记可以避免绑定歧义。示例代码如下：

[HttpPost("upload-tank-images")]
public IActionResult UploadTankImages([FromForm] TankPhotoTool2Response model)
{
    // 处理上传的文件和附加信息
    foreach (var imageItem in model.Images)
    {
        if (imageItem.Image != null)
        {
            // 示例：保存文件到本地
            var savePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/uploads", imageItem.Image.FileName);
            using (var stream = new FileStream(savePath, FileMode.Create))
            {
                imageItem.Image.CopyTo(stream);
            }
            // 处理ImageCode、Title等附加字段
            Console.WriteLine($"图片编码：{imageItem.ImageCode}，标题：{imageItem.Title}");
        }
    }
    return Ok(new { Message = "上传成功", Total = model.Images?.Count() });
}

前端请求构造 #

无论用原生JS、jQuery还是其他框架，都需要用FormData构造请求体，并且严格按照模型嵌套结构命名字段（集合元素需加索引）。原生JS示例：

// 初始化FormData
const formData = new FormData();

// 添加顶层字段
formData.append('DeliveryId', 1001);
formData.append('AuthoId', 'user_202405');
formData.append('TownHash', 'town_xyz');

// 添加第一个图片及附加信息
const file1 = document.querySelector('#file-input-1').files[0];
formData.append('Images[0].Image', file1);
formData.append('Images[0].ImageCode', 'TANK_FRONT_001');
formData.append('Images[0].Title', '油罐正面照');
formData.append('Images[0].AltText', '油罐正面');
formData.append('Images[0].Caption', '2024年5月现场拍摄');

// 添加第二个图片及附加信息
const file2 = document.querySelector('#file-input-2').files[0];
formData.append('Images[1].Image', file2);
formData.append('Images[1].ImageCode', 'TANK_SIDE_002');
formData.append('Images[1].Title', '油罐侧面照');
formData.append('Images[1].AltText', '油罐侧面');
formData.append('Images[1].Caption', '2024年5月现场拍摄');

// 发送POST请求
fetch('/api/upload-tank-images', {
    method: 'POST',
    body: formData
})
.then(res => res.json())
.then(result => console.log('上传结果:', result))
.catch(err => console.error('上传失败:', err));

关键注意事项 #

• 字段命名严格匹配：集合类型字段必须使用Images[N].PropertyName格式（N从0开始递增），ASP.NET才能正确识别集合中的每个元素。
• 默认中间件已支持：.NET Core/.NET 5+的Program.cs中默认配置了静态文件和路由中间件，会自动处理multipart/form-data类型请求，无需额外配置。
• Postman测试技巧：选择form-data请求类型，文件类型的键选择File，文本类型选择Text，键名同样遵循Images[N].PropertyName格式。

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