ABP .NET Core 8.1.0多页应用文件上传控制器接收值为Null

问题根源 #

1. JSON无法序列化File对象：你用JSON.stringify(product)序列化包含File对象的数据，但File对象无法被JSON格式解析，导致后端完全接收不到文件数据。
2. 请求格式不匹配：后端通过[FromForm]接收表单数据，但前端发送的是JSON格式，而非文件上传标准的multipart/form-data格式。
3. 数据类型不匹配：前端收集了多个文件存入数组，但ViewModel里的ImageFiles是单个IFormFile，多文件场景下类型不兼容。

修复步骤 #

1. 重构前端代码（改用FormData传输）

放弃JSON序列化，用FormData封装表单数据和文件，这是文件上传的标准方式：

var formData = new FormData(_$form[0]); // 自动收集表单内的普通输入项

// 手动添加文件（若表单文件输入未被自动捕获时使用）
$.each(_$form.find('input[type="file"]'), function (i, tag) {
    $.each($(tag)[0].files, function (i, file) {
        formData.append('ImageFiles', file); // 此处name需与ViewModel属性名严格对应
    });
});

abp.ajax({
    url: 'Products/Create',
    data: formData,
    contentType: false, // 禁止手动设置Content-Type，让浏览器自动处理multipart边界
    processData: false, // 禁止jQuery处理FormData，避免格式破坏
    type: 'POST'
}).done(function (data) {
    _$modal.modal('hide');
    abp.notify.success('Success message');
});

2. 调整ViewModel（适配文件数量）

如果是多文件上传，将IFormFile改为集合类型：

public class FileViewModel
{
    // 多文件用List<IFormFile>，单文件则保留IFormFile即可
    public List<IFormFile> ImageFiles { get; set; }
}

3. 控制器代码保持不变

控制器的[FromForm]配置正确，无需修改：

[HttpPost]
public async Task<IActionResult> Create([FromForm] FileViewModel product)
{
    // 此时product.ImageFiles可正常获取
    if (product.ImageFiles != null && product.ImageFiles.Any())
    {
        // 编写文件处理逻辑
    }
    return Json("ok");
}

额外注意点 #

• 确保前端文件输入框的name属性与ViewModel的属性名一致（如name="ImageFiles"），避免因名称不匹配导致接收失败。
• 不要在请求中手动设置contentType: 'application/json'，文件上传必须依赖multipart/form-data格式。

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