如何在ASP.NET Core+React的POST请求中用FormData传递带IFormFile的对象

我需要在React客户端实现「为每个Person上传多张图片」的功能，考虑两种数据结构：

• 类字典对象列表：{PersonID: id, Files: []}[]
• 单文件关联PersonID的列表：{PersonID: id, File: pic1}[]

但遇到核心问题：POST到ASP.NET Core后端时，File对象无法被JSON序列化。目前单独传对象列表或文件列表都正常，但混合关联的场景始终无法正确解析——后端要么接收为空列表，要么File属性为null。

客户端代码（React） #

const formData = new FormData();

// int类型参数（正常工作）
formData.append("divisionID", divisionID);

// 对象列表（正常工作）
listOfObjects.forEach(o => {
    formData.append("myObjectList[]", JSON.stringify(o)); // 注意方括号
});

// 文件列表（正常工作）
listOfFiles.forEach(f => {
    formData.append("myFileList", f); // 无方括号
});

// 尝试实现但失败的关联文件逻辑
picturesToUpload.forEach(pic => {
    formData.append(
        "picturesToUpload[]",
         JSON.stringify({
             personID: pic.personID,
             file: pic.file
         })
     );
 });

// 发送请求
await fetch("uploadpictures", {
    method: "POST",
    body: formData
});

服务端代码（ASP.NET Core） #

public class FileToUpload
{
    [JsonPropertyName("personID")]
    public int PersonID { get; set; }
    [JsonPropertyName("file")]
    public IFormFile? File { get; set; }
}

public class MyController
{
    [Route("uploadPictures")]
    [HttpPost]
    public ActionResult UploadPictures(
        [FromForm] int divisionID,                    // 正常工作
        [FromForm] List<string> myObjectList,         // 正常工作
        [FromForm] List<IFormFile> myFileList,        // 正常工作
        [FromForm] List<FileToUpload> picturesToUpload)    // 无法正常接收
    {
        // 业务逻辑
    }
}

解决方案 #

方案1：单文件关联PersonID的列表（推荐） #

核心逻辑：不序列化包含File的对象，通过索引绑定的方式分别传递PersonID和对应的File，让ASP.NET Core自动完成模型绑定。

客户端调整

const formData = new FormData();

// 保留原有正常参数
formData.append("divisionID", divisionID);
listOfObjects.forEach(o => {
    formData.append("myObjectList[]", JSON.stringify(o));
});
listOfFiles.forEach(f => {
    formData.append("myFileList", f);
});

// 修改关联文件的传递方式
picturesToUpload.forEach((pic, index) => {
    // 用索引绑定PersonID到对应列表项
    formData.append(`picturesToUpload[${index}].PersonID`, pic.personID);
    // 直接传递原始File对象，绑定到对应列表项的File属性
    formData.append(`picturesToUpload[${index}].File`, pic.file);
});

// 发送请求
await fetch("uploadpictures", {
    method: "POST",
    body: formData
});

服务端调整

移除JsonPropertyName特性（[FromForm]绑定依赖表单字段名，而非JSON属性名）：

public class FileToUpload
{
    public int PersonID { get; set; }
    public IFormFile? File { get; set; }
}

public class MyController
{
    [Route("uploadPictures")]
    [HttpPost]
    public ActionResult UploadPictures(
        [FromForm] int divisionID,
        [FromForm] List<string> myObjectList,
        [FromForm] List<IFormFile> myFileList,
        [FromForm] List<FileToUpload> picturesToUpload) // 现在可正常接收
    {
        // 业务逻辑
    }
}

方案2：类字典对象列表（多文件关联同一PersonID） #

如果要传递{PersonID: id, Files: []}结构，需按层级索引绑定表单字段：

客户端调整

picturesToUpload.forEach((personFiles, personIndex) => {
    // 传递当前Person的ID
    formData.append(`picturesToUpload[${personIndex}].PersonID`, personFiles.personID);
    // 遍历该Person的所有文件，按索引绑定到Files列表
    personFiles.Files.forEach((file, fileIndex) => {
        formData.append(`picturesToUpload[${personIndex}].Files[${fileIndex}]`, file);
    });
});

服务端调整

修改模型为多文件结构：

public class PersonFilesToUpload
{
    public int PersonID { get; set; }
    public List<IFormFile>? Files { get; set; }
}

public class MyController
{
    [Route("uploadPictures")]
    [HttpPost]
    public ActionResult UploadPictures(
        [FromForm] int divisionID,
        [FromForm] List<string> myObjectList,
        [FromForm] List<IFormFile> myFileList,
        [FromForm] List<PersonFilesToUpload> picturesToUpload)
    {
        // 业务逻辑
    }
}

关键注意事项 #

• File是二进制对象，不能通过JSON序列化传递，必须直接通过FormData传递原始File对象。
• 表单字段名需与后端模型属性名严格对应，并用[index]标识列表元素，ASP.NET Core才能正确解析列表结构。
• [FromForm]绑定依赖表单字段名，无需使用JsonPropertyName特性。

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