如何解决Angular(Kendo UI)上传CSV至ASP.NET Core WebAPI时后端接收空对象问题

我来帮你排查这个文件上传的问题，你遇到的情况很常见——前端明明传了数据，后端却接空对象，核心问题出在请求格式和后端接收方式不匹配上，尤其是用Kendo UI上传CSV这种场景。

1. 后端接收方式的核心问题 #

你用object plugs作为接收参数，再加上尝试[FromBody]/[FromForm]都没用，本质是因为Kendo UI的文件上传默认是multipart/form-data格式，而ASP.NET Core的模型绑定无法自动把这种格式的请求绑定到泛型object上。下面是两种可行的修复方案：

方式一：直接接收IFormFile（适合仅上传CSV文件） #

如果你的需求只是上传CSV文件，直接用IFormFile接收最直接：

[HttpPost]
[Route(ApiRoutes.EodVariationMargin)]
public async Task<IActionResult> UploadPlugAsync(IFormFile file) 
{ 
    if (file == null || file.Length == 0)
    {
        return BadRequest("No file uploaded.");
    }

    // 读取CSV文件内容
    using (var reader = new StreamReader(file.OpenReadStream()))
    {
        var csvContent = await reader.ReadToEndAsync();
        _logger.LogInformation("Received CSV content: {Content}", csvContent);
        // 后续业务处理逻辑
    }

    return Ok();
}

方式二：用DTO接收（需同时传文件+其他参数） #

如果需要上传文件的同时传递额外参数，先定义一个专门的DTO：

public class UploadPlugDto
{
    public IFormFile File { get; set; }
    // 可以添加其他需要的参数，比如：
    // public string Uploader { get; set; }
}

然后修改接口接收这个DTO：

[HttpPost]
[Route(ApiRoutes.EodVariationMargin)]
public async Task<IActionResult> UploadPlugAsync([FromForm] UploadPlugDto plugs) 
{ 
    if (plugs.File == null || plugs.File.Length == 0)
    {
        return BadRequest("No file uploaded.");
    }

    var fileContent = await new StreamReader(plugs.File.OpenReadStream()).ReadToEndAsync();
    _logger.LogInformation("Received CSV content: {Content}", fileContent);
    // 业务处理逻辑

    return Ok();
}

2. 确认Angular端Kendo Upload的配置 #

确保Kendo上传组件正确发送multipart请求，并且参数名和后端完全匹配：

@Component({
  selector: 'app-csv-upload',
  template: `
    <kendo-upload
      [saveUrl]="uploadApiUrl"
      [multiple]="false"
      (upload)="handleUpload($event)"
    ></kendo-upload>
  `
})
export class CsvUploadComponent {
  uploadApiUrl = '/api/your-eod-variation-margin-path'; // 对应你的ApiRoutes.EodVariationMargin

  handleUpload(event: UploadEvent) {
    // 手动构建FormData（如果需要自定义请求）
    const formData = new FormData();
    // 这里的键名'file'要和后端参数名完全一致（比如IFormFile的参数名，或DTO里的File属性）
    formData.append('file', event.files[0].rawFile);
    // 如果有额外参数：formData.append('uploader', 'Anand');

    // 发送请求（也可以用Kendo默认的saveUrl，这里是手动示例）
    this.http.post(this.uploadApiUrl, formData).subscribe({
      next: res => console.log('上传成功', res),
      error: err => console.error('上传失败', err)
    });
  }
}

3. 关键注意事项 #

• 参数名必须严格匹配：Angular端FormData的键名（比如'file'）要和后端的参数名完全一致，否则模型绑定会失败。
• 禁用[FromBody]：multipart/form-data格式的请求不能用[FromBody]，必须用[FromForm]（ASP.NET Core对multipart请求默认也会用FromForm绑定，不过显式标注更清晰）。
• 检查请求头：用Fiddler确认请求的Content-Type是multipart/form-data; boundary=xxxxxx，如果是application/json，说明Kendo的上传配置有误。

这样调整后，后端应该就能正确接收到上传的CSV文件了。

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