jquery - 使用 jquery ajax 在同一个 POST 请求中上传文件和 JSON 数据？

Question

我正在尝试使用 jQuery Ajax 发送 POST 请求，我想在其中上传文件和一些 json 数据。请查找代码，

var logoImg = $('input[name="logoImg"]').get(0).files[0];
var formData = new FormData();
formData.append('logo', logoImg);

var objArr = [];
objArr.push({
  "id": id,
  "name": userName
});

var obj = [{
  "objArr": objArr,
  "formData": formData
}];

$.ajax({
  type: "POST",
  url: url,
  dataType: "json",
  data: JSON.stringify(obj),
  contentType: "application/json",
  cache: false,
  async: false,
  complete: function(data) {
    alert("success");
  }
});

但是我收到内部服务器错误:500 并且未调用后端 API。

请帮助我在同一个 AJAX 请求中发送一个文件和一个数组 obj。提前致谢

Answer 1

您无法序列化在请求中发送的任何二进制数据。

要使用 FormData 对象发送附加信息，只需使用 append() 方法添加它，类似于处理图像本身:

var logoImg = $('input[name="logoImg"]').get(0).files[0];
var formData = new FormData();
formData.append('logo', logoImg);
formData.append('id', id);
formData.append('name', userName);

$.ajax({
  type: "POST",
  url: url,
  data: formData,
  contentType: false,
  processData: false,
  cache: false,
  complete: function(data) {
    alert("success");
  }
});

请注意，选项中的重要部分是将 contentType 和 processData 设置为 false，并删除 async: false > 以便异步发生请求。

最后，请注意，如果您要在请求中发送的输入全部包含在同一个表单中，您可以使用 FormData 构造函数将代码简化为:

var formData = new FormData($('#yourForm')[0]);