React多对象场景下无法上传文件到.NET Core 5问题咨询

问题根源 #

你的问题核心是FormData字段命名不符合ASP.NET Core的复杂集合+IFormFile绑定规则，导致模型绑定器无法将上传的文件和CourseFile对象的File属性对应上，具体错误点如下：

• 多余的[]后缀：你在拼接File字段名、普通属性名时都额外加了[]后缀，ASP.NET Core的表单模型绑定不需要这个后缀，加了之后会被识别为数组属性，无法匹配到CourseFile中单个IFormFile类型的File属性。
• 字段命名规则错误：绑定IList<CourseFile>类型的参数时，每个元素的属性命名必须严格遵循[索引].属性名的格式，比如第一个CourseFile的三个属性应该是[0].StudentId、[0].FileName、[0].File，第二个对应[1].StudentId以此类推，你现有逻辑生成的key不符合这个规则，自然无法完成绑定。

修复方案 #

直接替换你的FormData构造逻辑即可，正确的构造逻辑参考如下：

private getFormData(data: any[], form: FormData = new FormData()): FormData {
  data.forEach((item, index) => {
    const baseKey = `[${index}]`;
    Object.keys(item).forEach(key => {
      const value = item[key];
      const fullKey = `${baseKey}.${key}`;
      // 处理文件类型
      if (value instanceof File) {
        form.append(fullKey, value);
        return;
      }
      // 处理基础类型值
      form.append(fullKey, value ?? '');
    })
  })
  return form;
}

调用的时候直接传入你构造好的CourseFile数组即可：

const formData = this.getFormData(yourCourseFileArray);
// 直接发起请求即可
axios.post('/upload-files', formData);

注意事项 #

不要手动在axios请求头里设置Content-Type = "multipart/form-data"，浏览器会自动为FormData请求生成带分隔符（boundary）的请求头，手动设置会丢失boundary参数，反而导致请求解析失败。

修复后后端IList<CourseFile>参数会自动完成绑定，无需修改现有后端代码。你可以在Chrome调试工具的网络面板里查看请求的FormData字段，确认所有字段格式符合[索引].属性名规则即可。

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