在ASP.NET Core中用Vue.js和Axios多文件上传遇Count=0问题

我之前也碰到过一模一样的问题，折腾了好一阵才捋清楚原因，给你整理几个关键的排查点和正确的实现方式，应该能解决你的问题：

一、先把前端Vue代码的坑填上 #

你的HTML结构没问题，但JS部分可能在FormData构造或者Axios配置上出了问题，给你一个靠谱的实现示例：

new Vue({
  el: '#app',
  data() {
    return {
      selectedFiles: [] // 用来存选中的所有文件
    }
  },
  methods: {
    fileChange(files) {
      // 把FileList转成数组，方便后续遍历处理
      this.selectedFiles = Array.from(files);
    },
    async upload() {
      const formData = new FormData();
      
      // 重点：逐个把文件添加到FormData，这里的键名要和后端参数名完全匹配！
      this.selectedFiles.forEach(file => {
        formData.append('files', file); // 比如这里用'files'，后端参数名也得是files
      });

      try {
        const response = await axios.post('/api/upload', formData, {
          headers: {
            // 别手动写带boundary的Content-Type，就写multipart/form-data或者干脆不写
            // 让浏览器自动生成带分隔符的请求头，否则后端解析不了
            'Content-Type': 'multipart/form-data'
          }
        });
        console.log('上传成功啦', response);
      } catch (error) {
        console.error('上传失败了', error);
      }
    }
  }
});

这里要注意两个核心点：

• 必须把选中的文件逐个添加到FormData里，不能直接把整个文件数组塞进去
• 请求头的Content-Type别瞎改，手动加boundary反而会导致后端解析失败

二、后端ASP.NET Core控制器的正确写法 #

后端的参数绑定也很关键，参数名和类型一定要和前端对应上，给你一个标准的控制器示例：

[ApiController]
[Route("api/[controller]")]
public class UploadController : ControllerBase
{
    [HttpPost]
    public async Task<IActionResult> UploadFiles(IFormFileCollection files)
    {
        if (files.Count == 0)
        {
            return BadRequest("没收到任何文件哦");
        }

        // 这里就可以处理文件了，比如保存到服务器目录
        foreach (var file in files)
        {
            var savePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/uploads", file.FileName);
            using (var stream = new FileStream(savePath, FileMode.Create))
            {
                await file.CopyToAsync(stream);
            }
        }

        return Ok($"成功上传了 {files.Count} 个文件");
    }
}

这里的关键：

• 参数用IFormFileCollection（或者List<IFormFile>也可以），参数名files要和前端FormData里的键名完全一致
• 控制器一定要加[ApiController]特性，它会帮你自动处理表单数据的模型绑定
• 路由要和前端Axios请求的地址对应上（示例中前端请求地址是/api/upload）

三、容易踩的坑点排查 #

如果还是不行，对照这几点检查：

• 参数名不匹配：前端FormData的append键名和后端参数名必须完全一样，比如前端用'file'，后端就得是IFormFileCollection file（或者单个IFormFile file）
• Content-Type设置错误：手动写multipart/form-data; boundary=xxx是大忌，浏览器会自动生成正确的带boundary的请求头，你手动设置反而会搞砸
• FormData构造错误：别直接把this.selectedFiles整个append到FormData里，必须逐个append每个文件
• 跨域问题：如果前端和后端不在同一个域名下，要确保ASP.NET Core配置了CORS，允许POST请求，并且允许携带表单数据
• 表单enctype：你的HTML里已经加了enctype="multipart/form-data"，这个是对的，不能少

四、用浏览器开发者工具排查 #

如果还是搞不定，打开浏览器F12的Network标签，查看上传请求：

1. 看Request Headers里的Content-Type是不是multipart/form-data; boundary=xxxxxx（有一串随机的boundary）
2. 看Form Data部分，能不能看到你上传的文件列表

如果这两部分都正常，那就是后端的问题；如果Form Data里看不到文件，那就是前端构造请求的问题。

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