Razor Page中JS提交含IFormFile表单时文件为空的解决方法咨询

点击表单的Submit按钮提交时，IFormFile能正常传递到OnPost方法；但通过JavaScript代码提交时，OnPost方法中的FormFiles为null，其他模型成员可正常获取。

相关代码 #

模型代码 #

public string Applicant { get; set; }  
public List<IFormFile> FormFiles { get; set; } 

表单代码 #

<form method="post" name="ApplicantForm" enctype="multipart/form-data">
    <input asp-for="@Model.ApplicantModel.Applicant" />
    <input type="file" asp-for="@Model.ApplicantModel.FormFiles" multiple />
    <button type="submit" id="btnSubmit">Submit</button>
    <button type="button" onclick="doSomethingBeforeSubmit()">Do Something Before Submit</button>
</form>

原JavaScript代码 #

function doSomethingBeforeSubmit() {
    // 提交前执行操作...

    document.forms["ApplicantForm"].submit();
     // 或
    document.getElementById("btnSubmit").click();
}

OnPost方法代码 #

[BindProperty]
public ApplicantModel ApplicantModel { get; set; } 
public async Task<IActionResult> OnPostAsync()
{
     ApplicantModel.Applicant // 始终正常获取
     ApplicantModel.FormFiles // 点击Submit按钮提交时正常
     ApplicantModel.FormFiles // JS提交时为null    
}

环境：.NET 6、Visual Studio 2022、ASP.NET Core Web App (Razor Pages)

方法一：确保直接调用表单submit的正确性 #

如果表单已经正确设置enctype="multipart/form-data"，直接调用表单submit()方法本身有效，只需排除以下干扰：

• 检查doSomethingBeforeSubmit中的前置操作，是否意外修改了表单enctype属性或重置了文件输入框的值。
• 确保表单包含Razor Pages自动生成的防伪造令牌（默认是隐藏的__RequestVerificationToken输入框），用Razor原生<form>标签生成的表单会自动携带。

修改后的JS代码：

function doSomethingBeforeSubmit() {
    // 执行提交前的自定义操作

    const form = document.forms["ApplicantForm"];
    // 兜底确认enctype属性（可选，用于排查问题）
    if (form.enctype !== "multipart/form-data") {
        form.enctype = "multipart/form-data";
    }
    form.submit();
}

方法二：用FormData手动构建提交（更可控） #

如果直接调用submit仍有问题，可手动创建FormData对象包含所有字段和文件，通过fetch提交：

function doSomethingBeforeSubmit() {
    // 执行提交前的自定义操作

    const form = document.forms["ApplicantForm"];
    const formData = new FormData(form); // 自动包含所有表单字段、文件和防伪造令牌

    fetch(form.action, {
        method: form.method,
        body: formData,
        headers: {
            "RequestVerificationToken": form.querySelector('input[name="__RequestVerificationToken"]').value
        }
    })
    .then(response => {
        if (response.ok) {
            window.location.href = response.url; // 提交成功后跳转页面
        }
    })
    .catch(error => {
        console.error("提交失败:", error);
    });
}

注意事项 #

• 使用FormData时不要手动设置Content-Type，浏览器会自动添加带boundary的正确类型，否则会导致文件无法解析。
• 防伪造令牌必须包含在请求中，Razor Pages默认会生成对应的隐藏输入框，直接获取即可。

内容的提问来源于stack exchange，提问作者Parham.D