javascript - AJAX 错误 : "No multipart boundary param in Content-Type"

Question

我正在尝试将文件从本地主机上传到服务器，但我的网络控制台出现以下错误，状态代码为 500:

no multipart boundary param in Content-Type

我在我的 nginx 反向代理上启用了 cors。我的 AJAX 请求是这样的:

var files = document.getElementById('candidatePhoto').files;
if (!files.length) {
  return alert('Please choose a file to upload first.');
}
var file = files[0];

var form = new FormData();
form.append("files", file);

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://example.com",
  "method": "POST",
  "headers": {
    "Content-Type": "multipart/form-data"
  },
  "processData": false,
  "contentType": false,
  "data": form,
  success: function(data) {
    console.log("Success", data);
    addPhoto(data);
  },
  error: function(err) {
    console.log("Error", err);
    alert("Error: " + err);
  }
}

我的 HTML 表单也有 enctype='multipart/form-data'

Answer 1

如果您设置 contentType: false jQuery 将自动应用正确的 Content-Type header 来发送多部分数据。您包含明确指定内容类型的 header 对象会破坏此行为。它需要被删除。将您的 AJAX 请求设置更改为:

var settings = {
  async: true,
  crossDomain: true,
  url: "http://example.com",
  method: "POST",
  processData: false,
  contentType: false,
  data: form,
  success: function(data){
    console.log("Success", data);
    addPhoto(data);
  },
  error: function(err) { 
    console.log("Error", err);
    alert("Error: " + err);
  }
}