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 吧！