jQuery ajax 文件上传 Request Headers 缺少 boundary

原文地址： https://blog.jijian.link/2020-07-28/jquery-ajax-upload-file/

一般上传方式

const file = document.getElementById('js_resume_file').files[0];
const formData = new FormData();
formData.append('file', file);
$.ajax({
  type: 'POST',
  url: 'api',
  data: formData,
  contentType: 'multipart/form-data',
  processData: false,
  success: function (data) {
    console.log('上传完毕');
  },
});

如果代码是以上方式，大概率后端接口会报错 500。但是后端自测接口正常！

详细对比正常上传的 Network ，会发现 Request Headers 字段 Content-Type 不同，缺少了 boundary 字段。并且携带数据也不一样，Form Data 变成了 Request Payload。

自测接口正常的 Content-Type 如下：

Request Headers
  Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryInLo99EGvBmy5YZN

Form Data
  file: (binary)

500 错误的 Content-Type 如下：

Request Headers
  Content-Type: multipart/form-data

Request Payload
  ------WebKitFormBoundaryZ1vno04nVnWqUY5K
  Content-Disposition: form-data; name="file"; filename="test.jpg"
  Content-Type: image/jpeg

  ------WebKitFormBoundaryZ1vno04nVnWqUY5K--

处理方式

const file = document.getElementById('js_resume_file').files[0];
const formData = new FormData();
formData.append('file', file);
$.ajax({
  type: 'POST',
  url: 'api',
  data: formData,
- contentType: 'multipart/form-data',
+ contentType: false,
  processData: false,
  success: function (data) {
    console.log('上传完毕');
  },
});

处理方式很简单，将 contentType: false 即可。

原因：jquery ajax 源码中有一段这代码：

// Set the correct header, if data is being sent
if ( s.data && s.hasContent && s.contentType !== false || options.contentType ) {
  jqXHR.setRequestHeader( "Content-Type", s.contentType );
}

如果你手动设置了 contentType ，那么就用你设置的值来处理 Request Headers ，所以还是老实的设置为 false 吧！