上传文件时设置Content-Type导致后端无法获取FormData的问题求助

嘿，这个问题我之前也踩过坑！核心原因其实特别简单：当你用FormData上传文件时，手动设置Content-Type会破坏浏览器自动生成的请求头结构。

为什么会出现这个问题？ #

当你创建FormData并通过XMLHttpRequest发送请求时，浏览器会自动帮你完成两件关键的事：

1. 生成一个随机的boundary字符串（用来分隔FormData里的不同字段）
2. 把Content-Type设置成multipart/form-data; boundary=xxx（其中xxx就是生成的随机boundary）

如果你手动设置了Content-Type: multipart/form-data却没带上这个boundary，服务器就找不到请求体里字段的分隔规则，自然解析不出FormData的内容。

解决办法 #

最直接也最推荐的方案是：删掉手动设置Content-Type的代码，让浏览器自动处理请求头。修改后的代码示例如下：

function uploadFile() {
  var files = document.getElementById("file1").files[0];
  var formdata = new FormData();
  formdata.append("MyKey", files);
  
  const ajax = new XMLHttpRequest();
  // 绑定上传相关事件
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false); // 建议新增错误处理，让代码更健壮
  
  ajax.open("POST", "你的上传接口地址", true);
  // 这里不要加任何手动设置Content-Type的代码！
  ajax.send(formdata);
}

// 示例进度处理函数
function progressHandler(e) {
  if (e.lengthComputable) {
    const percent = (e.loaded / e.total) * 100;
    console.log(`上传进度：${percent}%`);
  }
}

// 示例完成处理函数
function completeHandler(e) {
  console.log("上传完成", ajax.responseText);
}

// 示例错误处理函数
function errorHandler(e) {
  console.error("上传失败", e);
}

额外说明 #

如果出于某些特殊原因你一定要手动设置Content-Type（其实完全没必要），可以在发送请求后获取浏览器自动生成的完整请求头，但这种方式纯粹多此一举：

ajax.open("POST", "你的上传接口地址", true);
ajax.send(formdata);
// 此时能拿到带boundary的完整Content-Type，但不需要手动设置
console.log(ajax.getResponseHeader("Content-Type")); // 输出类似 multipart/form-data; boundary=----WebKitFormBoundaryxxx

总结一下，让浏览器自动处理Content-Type是最优解，既省心又不会出错～

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