React+Axios向.NET API提交FormData时fileData接收为空求助

我来帮你排查下这个问题，几个核心原因可能导致后端接收不到文件数据，咱们一步步来解决：

1. FormData键名与后端参数不匹配 #

你的后端API接收的参数名为fileData，但前端代码里用的是formData.append('image', this.state.file)——.NET的模型绑定是严格按照键名匹配的，这就导致后端找不到对应的数据，所以fileData计数始终为0。

解决方法：把FormData的键名改成和后端一致的fileData：

formData.append('fileData', this.state.file);

如果是多文件上传，需要循环文件数组，重复append同一个键名：

this.state.files.forEach(file => {
  formData.append('fileData', file);
});

2. 手动设置Content-Type导致解析失败 #

当你用Axios发送FormData时，绝对不要手动设置'Content-Type': 'multipart/form-data'。Axios会自动为FormData生成包含boundary分隔符的正确Content-Type，手动设置会丢失这个关键的boundary，导致后端无法正确解析表单数据。

解决方法：移除headers里的Content-Type配置，只保留Accept即可：

headers: {
  Accept: 'application/json'
}

3. 后端参数需要明确绑定来源 #

.NET默认不会自动从表单绑定复杂类型（比如ICollection<IFormFile>），你需要给参数加上[FromForm]特性，明确告诉框架从表单数据中读取这些参数。如果parentId是从URL路由里获取的，还要加上[FromRoute]：

修改后的后端代码：

[HttpPost("upload")]
public virtual async Task<IActionResult> PostMulti([FromRoute] long parentId, [FromForm] ICollection<IFormFile> fileData)
{
    var parent = await Repository.GetAsync(parentId);
    if (parent == null)
    {
        return NotFound();
    }
    
    foreach (var file in fileData)
    {
        await SaveFile(file, parent);
    }
    
    return Created("", Map(Repository.Get(parentId)));
}

4. 确认parentId的传递正确性 #

你的请求URL里包含${this.props.playerId}，但后端参数是parentId——要确保这个playerId就是后端需要的parentId。如果后端的parentId不是从路由获取，而是需要从表单传递，那你还要把它加到FormData里：

formData.append('parentId', this.props.playerId);

同时后端的parentId参数要改成[FromForm] long parentId。

修改后的完整前端代码 #

const formData = new FormData();
formData.append('fileData', this.state.file);
// 如果parentId需要从表单传递，添加这一行
// formData.append('parentId', this.props.playerId);

console.log("this.state.file = ", this.state.file);

axios({
  url: `/api/gameMethods/playerStates/${this.props.playerId}/files/upload`,
  method: 'POST',
  data: formData,
  headers: {
    Accept: 'application/json'
  }
})
.then((response) => {
  console.log('response -- then: ', response);
  // 上传成功后建议清空文件状态，避免重复上传
  this.setState({ file: null });
})
.catch((error) => {
  console.log('error -- catch: ', error);
});

按照这些步骤修改后，后端应该就能正确接收到fileData了。

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