使用Fetch上传文件到ASP.NET Core Web API的参数问题

核心问题：参数名称不匹配 #

ASP.NET Core的模型绑定是根据参数名称与FormData中的键名匹配来赋值的：

• 前端你用formData.append("abcd", blob, "a.mp3")，把文件的键设为了abcd
• 后端方法参数名是files0，两者名称不一致，导致模型绑定无法找到对应数据，所以files0长度为0
• 而Request.Form.Files是直接读取整个请求表单中的所有文件集合，不依赖参数名称匹配，所以能拿到上传的文件

两种解决办法 #

方法1：修改后端参数名，与前端键名一致

如果只传单个文件，直接把参数名改成abcd，用IFormFile类型即可：

[HttpPost]
public async Task<IActionResult> OnPostUploadAsync(IFormFile abcd)
{
    var size = abcd.Length;
    return Ok(new { count = 1, size });
}

如果需要支持多文件上传，就用List<IFormFile>，同时前端多次append同一个键名：

// 前端多文件上传示例
formData.append("abcd", blob1, "1.mp3");
formData.append("abcd", blob2, "2.mp3");

后端对应代码：

public async Task<IActionResult> OnPostUploadAsync(List<IFormFile> abcd)
{
    var size = abcd.Sum(f => f.Length);
    return Ok(new { count = abcd.Count, size });
}

方法2：修改前端FormData的键名，与后端参数名一致

把前端的键名改成files0：

formData.append("files0", blob, "a.mp3");

这样后端的List<IFormFile> files0就能正确绑定到上传的文件了。

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