如何用JavaScript向.NET Core 8服务器发送含图片的复杂对象

由于你的对象包含IFormFile类型属性，确实必须使用FormData（multipart/form-data格式）传输，JSON无法直接携带二进制文件内容。以下是完整的单请求实现方案，可避免分多次请求带来的数据一致性问题。

一、前端构造FormData并发送请求 #

要让ASP.NET的模型绑定正确识别嵌套集合，FormData的键名需要遵循索引化命名规则（比如Elements[0].Id、Elements[0].File）。完整JavaScript代码如下：

// 假设已构建好包含文件的JavaScript对象 myComplexObject
const formData = new FormData();

// 添加父对象属性
formData.append('Id', myComplexObject.Id);
formData.append('SomeOtherValuesLikeThis', myComplexObject.SomeOtherValuesLikeThis);

// 遍历嵌套Elements集合，逐个添加属性和文件
myComplexObject.Elements.forEach((element, index) => {
    formData.append(`Elements[${index}].Id`, element.Id);
    formData.append(`Elements[${index}].SomeOtherValuesLikeThis`, element.SomeOtherValuesLikeThis);
    // element.File需是<input type="file">获取的File对象
    if (element.File) {
        formData.append(`Elements[${index}].File`, element.File);
    }
});

// 发送AJAX请求
$.ajax({
    url: "/Component/Create",
    type: "POST",
    data: formData,
    processData: false, // 禁止jQuery自动处理FormData
    contentType: false, // 让浏览器自动生成multipart/form-data请求头
    success: function (response) {
        console.log('提交成功');
        // 自定义成功逻辑
    },
    error: function (error) {
        console.error('提交失败', error);
        // 自定义错误逻辑
    },
    complete: function () {
        // 自定义完成后的清理逻辑
    }
});

二、后端控制器接收模型 #

ASP.NET 8 Core框架会自动完成模型绑定（包括文件解析），只需直接接收ComponentModel即可。先修正原模型中的泛型错误：

修正后的模型定义 #

public class ComponentModel
{
    public Guid Id { get; set; }
    public string SomeOtherValuesLikeThis { get; set; }
    public IList<ElementModel> Elements { get; set; } = new List<ElementModel>();
}

public class ElementModel
{
    public Guid Id { get; set; }
    public string SomeOtherValuesLikeThis { get; set; }
    public IFormFile File { get; set; }
}

控制器代码 #

public class ComponentController : Controller
{
    [HttpPost]
    public IActionResult Create(ComponentModel model)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        // 处理业务逻辑：示例为保存文件到服务器、数据入库
        foreach (var element in model.Elements)
        {
            if (element.File != null && element.File.Length > 0)
            {
                var savePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/uploads", element.File.FileName);
                using (var stream = new FileStream(savePath, FileMode.Create))
                {
                    element.File.CopyTo(stream);
                }
            }
        }

        return Ok("提交成功");
    }
}

三、关键注意事项 #

• FormData键名规则：嵌套集合必须使用[索引]格式命名键名，否则模型绑定无法识别集合元素。
• AJAX配置：必须设置processData: false和contentType: false，否则jQuery会破坏FormData的格式。
• 模型验证：可在模型属性上添加[Required]等数据注解，后端通过ModelState.IsValid验证合法性。
• 大文件上传：若需上传大文件，需在Program.cs中配置限制：

builder.Services.Configure<FormOptions>(options =>
{
    options.MultipartBodyLengthLimit = 104857600; // 限制为100MB
});

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