You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

AngularJS上传文件至.NET Core接口时,IFormFile参数始终为null的问题排查

AngularJS上传文件至.NET Core接口时,IFormFile参数始终为null的问题排查

我来帮你一步步排查这个问题,从代码细节到请求链路逐一分析:

首先,修正一个明显的拼写错误

你的HTML按钮里的点击指令写成了ng click,正确的应该是ng-click(没有空格),这个错误会导致点击按钮根本触发不了上传函数!先把这个改过来:

<input type="file" id="motorFactorFile" />
<button class="btn btn-success" ng-click="vm.uploadMotorFactor()">Upload</button>

接下来,优化AngularJS的上传配置

你已经用了Content-Type: undefined和transformRequest: angular.identity,这个配置是对的——手动设置multipart/form-data会丢失浏览器自动生成的boundary分隔符,反而导致.NET Core无法解析表单数据。这里给你两个更稳妥的方案:

方案1:用注入的Upload服务简化上传(更推荐)

既然你已经在控制器里注入了Upload服务,直接用它处理文件上传会更省心,它会自动处理FormData和请求头:

vm.uploadMotorFactor = function () {
  let fileInput = document.getElementById('motorFactorFile');
  let file = fileInput.files[0];

  if (!file) {
    alert("Please select a CSV file to upload.");
    return;
  }

  Upload.upload({
    url: '/api/Membership/UploadMotorFactor',
    data: { file: file } // 键名和API参数名保持一致
  }).then(response => {
    alert('File uploaded successfully!');
    fileInput.value = ''; // 清空文件输入
  }).catch(error => {
    console.error('Error uploading file:', error);
    alert('File upload failed.');
  });
};

方案2:如果坚持用原生$http,排查拦截器干扰

检查你的AngularJS应用是否有全局HTTP拦截器,有些拦截器会自动修改请求头(比如强制添加Content-Type),这会破坏multipart请求的格式。可以临时禁用拦截器测试:

$http.post(uploadUrl, formData, {
  headers: { 'Content-Type': undefined },
  transformRequest: angular.identity,
  skipAuthorization: true // 如果有认证拦截器,临时跳过测试
})

然后,在API端添加日志排查

修改你的接口代码,添加日志看看请求的表单数据是否真的到达了服务器:

[HttpPost]
public async Task<IActionResult> UploadMotorFactor([FromForm] IFormFile file)
{
    try
    {
        // 记录表单中的文件数量和详情
        _logger.LogInformation($"收到的文件总数:{Request.Form.Files.Count}");
        if (Request.Form.Files.Count > 0)
        {
            var receivedFile = Request.Form.Files[0];
            _logger.LogInformation($"文件名:{receivedFile.FileName},文件大小:{receivedFile.Length}字节");
        }
        
        return file != null ? Ok() : StatusCode(StatusCodes.Status500InternalServerError);
    }
    catch (Exception e)
    {
        _logger.LogError(e, "上传Motor Factor文件失败");
        return StatusCode(StatusCodes.Status500InternalServerError);
    }
}

最后,用浏览器开发者工具验证请求

打开浏览器的Network标签,触发上传后查看对应的POST请求:

  • 检查Headers里的Content-Type是否是multipart/form-data; boundary=----WebKitFormBoundaryxxxx(带自动生成的boundary)
  • 检查Form Data部分是否有file字段,并且显示了文件名和文件大小

常见的其他排查点

  1. 确认FormData的键名和API参数名完全一致(都是file,大小写敏感)
  2. 检查.NET Core项目是否启用了Multipart中间件(默认是启用的,但如果有自定义中间件可能干扰)
  3. 确保上传的文件没有超过API设置的大小限制(可以在Program.cs里配置builder.Services.Configure<FormOptions>(x => x.MultipartBodyLengthLimit = ...))

备注:内容来源于stack exchange,提问作者Sargis

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.14 11:19:32