.NET 6 MVC使用Ajax上传图片IFormFile参数为null问题求解

• 核心问题：文件选择的<input>标签未设置name属性。ASP.NET Core 的模型绑定完全依赖表单字段的name属性匹配后端参数名，你后端接口参数名为files，但文件输入框没有对应name，FormData 根本不会收集该文件字段，后端自然只能拿到null。
• 逻辑错误：onInputBannerChange方法直接调用了原生DOM的form.submit()方法，该方法不会触发表单的submit事件，你写在form标签上的onsubmitAJAX拦截逻辑完全不生效，选完文件会直接触发整页刷新的普通提交，你写的fetch异步上传代码根本没有执行机会。
• JS报错：代码中尝试获取name="result"的表单元素，但整个HTML结构中不存在该节点，代码运行到这里会直接抛出空引用错误，阻断后续流程。
• 隐性坑：很多教程会让手动给AJAX请求加Content-Type: multipart/form-data请求头，实际上传FormData时浏览器会自动生成带随机boundary标识的该请求头，手动设置会丢失boundary参数，导致后端无法正确解析表单内容。

HTML 部分 #

<form id="InputBannerForm" action="@Url.Action("UploadLocalBanner", "Api")" enctype="multipart/form-data" method="post">
    <div class="row justify-content-center">
        <div class="col-12 col-md-6 mb-3">
            <div>
                <label for="InputBanner" class="col-12">@Localizer["banner"]</label>
                <!-- 核心修正：添加name属性和后端参数名一致，选完文件直接触发AJAX提交 -->
                <input id="InputBanner" name="files" type="file" accept="image/jpeg, image/png" onchange="AJAXSubmit(document.getElementById('InputBannerForm'))">
            </div>
            <!-- 补充结果展示节点，避免JS空引用错误 -->
            <div id="result" class="mt-2 text-sm"></div>
        </div>
    </div>
</form>

JS 部分 #

async function AJAXSubmit(oFormElement) {
    const resultElement = document.getElementById("result");
    const formData = new FormData(oFormElement);

    try {
        const response = await fetch(oFormElement.action, {
            method: 'POST',
            // 禁止手动设置Content-Type请求头，浏览器会自动生成带正确boundary的头
            body: formData
        });

        if (response.ok) {
            console.log("上传成功");
            resultElement.innerText = `上传成功，状态码：${response.status}`;
        } else {
            const errText = await response.text();
            resultElement.innerText = `上传失败：${errText}`;
        }
    } catch (error) {
        console.error('请求异常:', error);
        resultElement.innerText = '网络异常，上传请求发送失败';
    }
}

后端 Controller 部分 #

[Route("SO-{clientId}/{controller}/{action}")]
[HttpPost]
// 显式指定从表单绑定数据，避免其他绑定源干扰
public async Task<IActionResult> UploadLocalBanner([FromForm]IList<IFormFile> files)
{
    try
    {
        if (files == null || files.Count == 0 || files[0].Length == 0)
        {
            return BadRequest("未接收到有效上传文件");
        }
        IFormFile source = files[0];
        // 用内置方法安全获取文件名，自动兼容不同系统的路径分隔符
        string filename = Path.GetFileName(source.FileName.Trim('"'));
        // 用Path.Combine拼接路径，不要硬编码反斜杠，适配跨平台部署
        string targetDirectory = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "Images", "LocalBanners");
        
        if (!Directory.Exists(targetDirectory))
        {
            Directory.CreateDirectory(targetDirectory);
        }

        string saveFullPath = Path.Combine(targetDirectory, filename);
        using (FileStream output = File.Create(saveFullPath))
        {
            await source.CopyToAsync(output);
        }
    
        return Ok(new { savedPath = $"/Images/LocalBanners/{filename}" });
    }
    catch(Exception ex)
    {
        return BadRequest($"文件保存失败：{ex.Message}");
    }
}

• 如果你的项目有全局AJAX/fetch拦截器，会统一给请求加Content-Type: application/json之类的头，记得把文件上传接口加入排除规则，不要覆盖浏览器自动生成的multipart请求头。
• 生产环境记得加文件后缀校验、文件大小限制、文件名重命名逻辑，避免文件名冲突和恶意文件上传风险。
• 如果部署在IIS上，记得检查请求过滤配置，不要拦截过大的图片上传请求。

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