使用JS向带IFormFile的ASP.NET Core接口上传文件的问题求助

问题原因 #

• 手动设置multipart/form-data请求头并写死boundary参数：使用axios传递FormData对象时，axios会自动生成符合规范的Content-Type请求头，同时自动生成随机的表单分隔boundary。手动指定该请求头后，固定的boundary会导致后端无法正确拆分表单中的普通字段和文件字段，因此只能正常读取id参数，无法识别文件。
• 表单文件字段的append格式错误：如果files是文件选择框返回的FileList类数组对象，直接append整个集合不符合表单上传规范，需要取单个文件对象或者遍历逐个追加。

修复方案 #

前端代码调整

const formData = new FormData();      
formData.append('id', 123);
// 单文件上传：取FileList中的单个文件对象
formData.append('files', files[0]);  

// 多文件上传写法：遍历FileList逐个追加
// for (let i = 0; i < files.length; i++) {
//   formData.append('files', files[i]);
// }

// 移除手动配置的content-type头，axios会自动处理
await axios.post(url, formData);

后端可选优化（更稳定的绑定方式）

无需手动读取HttpContext，直接在Action参数中绑定即可：

// 单文件接收
public IActionResult Upload(string id, IFormFile files)
{
    // 直接使用files变量即可
}

// 多文件接收
// public IActionResult Upload(string id, IEnumerable<IFormFile> files)
// {
// }

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