.Net 6 Razor Pages Ajax文件上传后端IFormFile为空求助

核心原因 #

1. FormData键名与后端参数不匹配：前端通过formData.append(file1.name, file1)把文件以文件名作为键上传，但后端接收参数名为formData，ASP.NET Core无法将上传的文件映射到对应的IFormFile参数，导致参数为Null。
2. 前端Ajax代码中重复设置contentType，虽然后设置的contentType: false会覆盖前一个，但属于冗余代码，可能造成混淆。

修复步骤 #

1. 修改前端Ajax代码 #

调整FormData的键名，使其与后端参数名一致，同时移除冗余的contentType设置：

function UploadFile1ViaAjax()
{           
   var file1 = $('#formFile1').prop("files")[0];
   
   var url = "/Employees/AjaxFileUpload?handler=UploadFile1";
   formData = new FormData();
   // 将键名改为与后端参数名一致的"formData"
   formData.append("formData", file1);

   alert("Uploading file 1 : " + file1.name);

   $.ajax({
        type: "POST",
        url: url,
        contentType: false, // 仅保留这一行，FormData会自动生成正确的multipart头部
        processData: false,            
        data: formData, 
        headers: {
            RequestVerificationToken:
                $('input:hidden[name="__RequestVerificationToken"]').val()
        },
        success: function (result) {
            alert("success: " + JSON.stringify(result));
        },
        failure: function (result) {
            alert("failure");
        },
        error: function (result) {
            alert("error");
        },
        }).done(function (result) {
                alert("ajax call complete.");
    });       
}   

2. 可选优化（更规范的写法） #

给文件输入框添加name属性，使其与后端参数名一致，后续如果需要直接基于表单构造FormData会更便捷：

<input class="form-control" type="file" id="formFile1" name="formData">

3. 后端代码无需修改 #

当前后端的OnPostUploadFile1方法参数名formData已经与修改后的前端键名匹配，保持原代码即可：

public IActionResult OnPostUploadFile1(IFormFile formData)
{
    if (formData != null)
    {               
        return new ObjectResult(new { status = "success" });
    }
    return new ObjectResult(new { status = "fail" });
}

完成以上修改后，点击上传按钮，后端就能正确获取到上传的文件数据，IFormFile参数不再为Null。

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