.NET Core中AJAX提交带文件表单及拖拽上传文件为空问题排查

嘿，我之前也踩过拖拽上传文件后端接收不到的坑，咱们一步步排查可能漏掉的关键点：

1. 表单/请求的编码类型是否正确 #

文件上传必须使用 multipart/form-data 编码类型，这是最容易忽略的点：

• 如果是原生HTML表单，要确保给表单加上属性：<form id="upload-form" enctype="multipart/form-data">
• 如果是通过AJAX发送请求（比如你用代码创建拖拽并触发上传），绝对不能手动设置contentType为application/json或者其他值，要把contentType设为false，同时设置processData: false（以jQuery为例）：

$.ajax({
  url: '/your-controller-endpoint',
  type: 'POST',
  data: formDataInstance,
  contentType: false, // 关键：让浏览器自动处理multipart编码
  processData: false, // 关键：不要把FormData转成字符串
  beforeSend: function() {
    console.log('数据已发送');
  }
});

如果用原生Fetch API，也要确保不设置Content-Type头，让浏览器自动添加正确的编码头。

2. FormData对象是否正确包含文件 #

不管是自己构建还是插件生成的FormData，要确认文件真的被加进去了：

• 拖拽事件中，文件存在于event.dataTransfer.files对象里，要把它们append到FormData中，注意字段名要和后端一致：

dropArea.addEventListener('drop', function(e) {
  e.preventDefault();
  const files = e.dataTransfer.files;
  const formData = new FormData();
  // 循环添加文件，字段名比如'uploadFiles'，要和后端接收的参数名对应
  for (let i = 0; i < files.length; i++) {
    formData.append('uploadFiles', files[i]);
    // 如果是多文件，也可以用uploadFiles[]作为字段名
  }
  // 后续发送formData
});

如果用第三方拖拽插件，检查插件的配置项，比如是否需要指定fileFieldName这类参数来设置表单字段名，避免插件默认的字段名和后端不匹配。

3. 后端接收的参数名是否和前端一致 #

这是另一个高频问题：前端FormData里的字段名，必须和后端控制器接收的参数名完全匹配。比如：

• 前端用formData.append('uploadFiles', file)，那ASP.NET控制器要写public IActionResult Upload(IFormFile uploadFiles)
• 如果是PHP，要取$_FILES['uploadFiles']
  如果名字不匹配，后端自然会拿到null。

4. 用浏览器开发者工具验证请求内容 #

打开浏览器的Network面板，找到你的上传请求，查看Request Payload部分：

• 你应该能看到类似Content-Disposition: form-data; name="uploadFiles"; filename="test.jpg"的内容，以及文件的二进制数据
• 如果看不到这些内容，说明前端根本没把文件发送出去，问题出在FormData构建或者插件的拖拽事件处理上

5. 检查是否有全局请求拦截器干扰 #

如果项目里有全局的AJAX/Fetch拦截器，可能会修改请求头或者转换请求数据，导致文件上传的格式被破坏。比如有些拦截器会强制把请求转成JSON格式，这会直接导致文件数据丢失，要确保上传请求绕过这类拦截器。

先从这几点入手排查，大概率能找到问题所在！

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