ASP.NET Core MVC中Ajax提交含文件的自定义对象问题

不行。JSON格式本身无法序列化二进制文件数据，而IFormFile对应HTTP请求中multipart/form-data类型的文件部分，纯application/json请求无法携带这类二进制内容，这会导致后端模型绑定失败，最终接收的bankViewModel为null或默认值。

但可以通过FormData间接实现——把自定义对象的普通字段（包括集合）按模型绑定规则加入FormData，同时单独添加文件项，让后端能正确绑定到ViewModel。

可行实现方案 #

1. 定义ViewModel #

public class BankViewModel
{
    public string BankName { get; set; }
    public string Address { get; set; }
    public IFormFile Logo { get; set; }
    public List<BranchViewModel> Branches { get; set; } = new();
}

public class BranchViewModel
{
    public string BranchName { get; set; }
    public string Location { get; set; }
    public IFormFile Photo { get; set; }
}

2. 前端Ajax处理（按模型绑定规则构建FormData） #

直接按ViewModel的属性命名（包括集合索引）将所有字段和文件加入FormData，ASP.NET Core的模型绑定会自动识别：

// 构建FormData
const formData = new FormData();

// 添加普通字段
formData.append("BankName", $("#BankName").val());
formData.append("Address", $("#Address").val());

// 添加Logo文件
if ($("#Logo")[0].files.length > 0) {
    formData.append("Logo", $("#Logo")[0].files[0]);
}

// 添加分支集合（含每个分支的普通字段和Photo文件）
$(".branch-item").each((index, el) => {
    const $el = $(el);
    // 分支普通字段
    formData.append(`Branches[${index}].BranchName`, $el.find(".branch-name").val());
    formData.append(`Branches[${index}].Location`, $el.find(".branch-location").val());
    // 分支Photo文件
    const photoFile = $el.find(".branch-photo")[0].files[0];
    if (photoFile) {
        formData.append(`Branches[${index}].Photo`, photoFile);
    }
});

// 发送Ajax请求
$.ajax({
    url: "/Banks/Create",
    type: "POST",
    data: formData,
    contentType: false, // 必须设为false，让浏览器自动设置multipart/form-data边界
    processData: false, // 必须设为false，避免jQuery处理FormData导致格式错误
    success: () => {
        console.log("提交成功");
        // 跳转或刷新页面
    },
    error: (xhr) => {
        console.error("提交失败：", xhr.responseText);
    }
});

3. 后端Action直接接收ViewModel #

只要FormData的键名和ViewModel属性（含集合索引）完全匹配，模型绑定会自动完成：

[HttpPost]
public async Task<IActionResult> Create([FromForm] BankViewModel bankViewModel)
{
    if (!ModelState.IsValid)
    {
        return View(bankViewModel);
    }

    // 处理文件保存逻辑（示例）
    if (bankViewModel.Logo != null)
    {
        var logoPath = Path.Combine(wwwrootPath, "uploads", bankViewModel.Logo.FileName);
        using var stream = new FileStream(logoPath, FileMode.Create);
        await bankViewModel.Logo.CopyToAsync(stream);
    }

    foreach (var branch in bankViewModel.Branches)
    {
        if (branch.Photo != null)
        {
            var photoPath = Path.Combine(wwwrootPath, "uploads", branch.Photo.FileName);
            using var stream = new FileStream(photoPath, FileMode.Create);
            await branch.Photo.CopyToAsync(stream);
        }
    }

    // 保存业务数据到数据库
    // ...

    return RedirectToAction(nameof(Index));
}

关键注意事项 #

• 集合的索引必须是连续的0,1,2...，否则模型绑定无法正确识别集合项
• 必须设置contentType: false和processData: false，否则FormData格式会被破坏
• 如果分支是动态添加的，确保每个分支的字段和文件都按索引正确命名

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