使用Axios上传图片时后端ICollection<IFormFile>始终为空的问题

前端使用Axios上传图片时，后端接收文件的集合始终为空。前端已通过FormData构造图片数据，控制台可正常打印图片对象及名称，但后端ASP.NET Core接口中的ICollection<IFormFile>类型参数fileData始终为空。

你的前端代码： #

const fd = new FormData(); 
fd.append('image', this.state.selectedFile, this.state.selectedFile.name); 
const postData = { method: 'POST', credentials: 'include', body: fd } 
//this correctly shows the image object and name: 
console.log('selected image file name: ', this.state.selectedFile.name); 
console.log('select image: ', this.state.selectedFile); 
axios({ 
  method: 'post', 
  url: `/api/gameStats/profileImage/${this.props.profileId}/files/upload`, 
  postData 
}) 
.then(function (response) { 
  console.log('then: ', response); 
}) 
.catch(function (response) { 
  console.log('catch: ', response); 
}); 

你的后端代码： #

[HttpPost("upload")]
public virtual async Task<IActionResult> PostMulti(Int64 parentId, ICollection<IFormFile> fileData) 
{ 
    // fileData is always empty... :(
    TParent parent; 
    using (var tran = Session.BeginTransaction()) { 
        parent = Repository.GetParent(parentId); 
        if (!Security.CanCreate(CurrentUser, parent, null)) 
            return StatusCode(HttpStatusCode.Forbidden); 
        tran.Rollback(); 
    } 
    foreach (var file in fileData) { 
        await SaveFile(file, parent); 
    } 
    return Created("", Map(Repository.Get(parentId))); 
} 

我帮你排查出了几个关键问题，调整后就能解决文件接收为空的问题：

问题1：Axios请求配置错误 #

你把自定义的postData对象作为axios的配置项传进去了，但axios不认识这个参数，正确的做法是直接在axios的配置对象里声明data、credentials这些属性，不需要额外封装。

问题2：FormData字段名与后端参数名不匹配 #

你前端用fd.append('image', ...)添加的字段名是image，但后端接收的参数名是fileData，ASP.NET Core的模型绑定是严格匹配字段名的，名字对不上就无法绑定到参数上。

问题3：（可选但建议）明确后端参数的绑定来源 #

最好给后端的fileData参数加上[FromForm]特性，明确告诉框架从表单数据中绑定这个参数，避免在复杂路由场景下出现绑定歧义。

修正后的前端代码 #

const fd = new FormData();
// 把字段名改成和后端参数一致的'fileData'
fd.append('fileData', this.state.selectedFile, this.state.selectedFile.name);

console.log('selected image file name: ', this.state.selectedFile.name);
console.log('select image: ', this.state.selectedFile);

axios({
  method: 'post',
  url: `/api/gameStats/profileImage/${this.props.profileId}/files/upload`,
  data: fd, // 直接将FormData作为请求data传入
  credentials: 'include'
})
.then(function (response) {
  console.log('then: ', response);
})
.catch(function (error) {
  console.log('catch: ', error);
});

修正后的后端代码（添加[FromForm]） #

[HttpPost("upload")]
public virtual async Task<IActionResult> PostMulti(Int64 parentId, [FromForm]ICollection<IFormFile> fileData) 
{ 
    // 你的原有代码...
}

为什么这样改能解决问题？ #

1. 修正Axios配置后，请求会以正确的multipart/form-data格式发送，浏览器会自动添加包含分隔符的Content-Type头，这是文件上传的必要条件。
2. 字段名与参数名匹配后，ASP.NET Core的模型绑定系统才能正确识别并映射FormData中的文件到fileData集合。
3. [FromForm]特性消除了绑定来源的歧义，确保框架从表单数据中读取文件，而不是其他来源（比如URL参数）。

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