.NET Core MVC Ajax上传图片：模型绑定失败Image为null

你遇到的问题核心是ASP.NET Core的Unobtrusive Ajax（就是你用的data-ajax系列属性）默认不支持文件上传，再加上细节处理不到位，导致后端始终接收不到Image参数，进而触发ModelState验证失败。

为什么会这样？ #

Unobtrusive Ajax默认会把表单数据序列化成application/x-www-form-urlencoded格式，这种格式无法传递文件内容。而文件上传必须使用multipart/form-data请求，并且需要用FormData对象来封装表单数据——这正是默认的Unobtrusive Ajax没做的事，所以你的文件根本没传到后端，Image自然是null，[Required]验证也就失败了。

具体修复方案 #

方案1：放弃Unobtrusive Ajax，手动写Ajax上传逻辑（最直接）

这种方式不需要依赖Unobtrusive Ajax的特性，完全手动控制文件上传流程：

1. 修改前端表单与脚本：

   <form id="imageUploadForm" asp-action="AddImages" asp-controller="UserAdmin" enctype="multipart/form-data"> 
       <!-- 如果需要支持多文件上传，添加multiple属性 -->
       <input id="file-input-1" name="Image" type="file" class="uploadimg" data-id="1" accept=".jpg, .jpeg, .png" multiple /> 
       <div class="col-xs-12"> 
           <button type="button" id="submitBtn">Save</button> 
       </div> 
   </form>
   
   <script>
   document.getElementById('submitBtn').addEventListener('click', function() {
       const form = document.getElementById('imageUploadForm');
       const formData = new FormData(form);
   
       // 发送Ajax请求
       fetch(form.action, {
           method: 'POST',
           body: formData
       })
       .then(response => response.json())
       .then(result => {
           if (result.success) {
               // 替换成你的onSuccessSubmit逻辑
               console.log('图片上传成功！');
           } else {
               // 替换成你的onFailed逻辑
               console.error('上传失败：', result.errors.join('\n'));
           }
       })
       .catch(error => {
           // 替换成你的onFailed逻辑
           console.error('请求出错：', error);
       });
   });
   </script>
   

2. 优化后端方法：
   返回JSON格式的结果，方便前端处理验证错误：

   using Microsoft.AspNetCore.Mvc;
   using System.Linq;
   
   [HttpPost] 
   public IActionResult AddImages(ImageModel model) { 
       if (!ModelState.IsValid) { 
           // 返回验证错误信息
           var errors = ModelState.Values
               .SelectMany(v => v.Errors)
               .Select(e => e.ErrorMessage)
               .ToList();
           return Json(new { success = false, errors });
       } 
   
       // 这里添加文件保存逻辑（示例）
       // foreach (var file in model.Image)
       // {
       //     var savePath = Path.Combine(_webHostEnvironment.WebRootPath, "uploads", file.FileName);
       //     using (var stream = new FileStream(savePath, FileMode.Create))
       //     {
       //         await file.CopyToAsync(stream);
       //     }
       // }
   
       return Json(new { success = true });
   }
   

方案2：保留Unobtrusive Ajax，自定义提交逻辑

如果你想继续使用data-ajax的回调特性（比如onBeginSubmit、onSuccessSubmit），可以覆盖Unobtrusive Ajax的默认提交行为，让它支持FormData：

// 覆盖Unobtrusive Ajax的表单提交逻辑
$(document).on("submit", "form[data-ajax=true]", function (e) {
    e.preventDefault();
    const $form = $(this);
    const formData = new FormData($form[0]);

    $.ajax({
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: formData,
        // 必须设置这两个参数，否则无法上传文件
        processData: false,
        contentType: false,
        // 对应data-ajax-begin
        beforeSend: function () {
            const beginFunc = $form.data("ajax-begin");
            if (beginFunc) window[beginFunc]();
        },
        // 对应data-ajax-success
        success: function (result) {
            const successFunc = $form.data("ajax-success");
            if (successFunc) window[successFunc](result);
        },
        // 对应data-ajax-failure
        error: function (xhr) {
            const failFunc = $form.data("ajax-failure");
            if (failFunc) window[failFunc](xhr);
        },
        // 对应data-ajax-complete
        complete: function () {
            const completeFunc = $form.data("ajax-complete");
            if (completeFunc) window[completeFunc]();
        }
    });
    return false;
});

额外注意事项 #

• 确保前端input的name属性和模型中的属性名完全一致（这里是Image，没问题）。
• 如果需要上传多个文件，必须给input添加multiple属性，否则模型的List<IFormFile>只能接收到单个文件（甚至如果没选文件就是null）。
• 后端如果要保存文件，需要注入IWebHostEnvironment来获取网站根路径，避免硬编码路径。

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