.NET Core与Vue通过[FromForm]传递含IFormFile的对象列表失败

问题原因 #

直接将整个对象数组作为单个值添加到FormData中，不符合.NET Core模型绑定对复杂列表（含IFormFile）的解析格式要求，导致后端无法识别并绑定数据。

解决方案 #

需要遍历数组，按列表索引+字段名的格式逐个添加FormData项，确保每个字段（包括文件）都能被正确识别：

Vue端修正代码 #

const formData = new FormData();
// 遍历要发送的对象数组
pushToApi.forEach((item, index) => {
    // 添加PageId（如果有值）
    if (item.PageId) {
        formData.append(`imageGalleryDto[${index}].PageId`, item.PageId);
    }
    // 添加Order（如果有值）
    if (item.Order !== undefined) {
        formData.append(`imageGalleryDto[${index}].Order`, item.Order);
    }
    // 添加图片文件（确保item.Image是File类型对象）
    if (item.Image) {
        formData.append(`imageGalleryDto[${index}].Image`, item.Image, item.Image.name);
    }
});

this.updateImageGallery(formData).then((res) => {
    // 后续逻辑
});

.NET Core端注意事项 #

• 保持接口的[FromForm]特性不变，这是FormData提交必须的配置
• 前端不要手动设置Content-Type，axios等请求库会自动为FormData生成multipart/form-data; boundary=xxx的正确请求头，手动设置会导致边界值丢失，无法解析数据

验证方法 #

打开浏览器开发者工具（F12），查看Network面板中该请求的Form Data部分，确认每个字段都按imageGalleryDto[0].PageId、imageGalleryDto[0].Image这样的格式存在，且文件已正确携带。

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