通过ajax上传的multipart/form-data的boundary不同导致后端接收不到

问题

自己手动通过ajax上传multipart/form-data类型的请求（既有文件，也有表单字段）的时候，服务器接收不到对应的文件和字段。当时的请求ajax是这样的

$.ajax({
         type: 'post',
         url: uplaodUrl,
         data: sendData,
         processData: false,
         contentType: "multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW",
         success: function (ret) {
         },
         error: function (err) {
           console.log('请求失败');
         }
      });

请求

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 29570
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW
Host: fs.yunhuiye.com
Origin: http://localhost:9000
Pragma: no-cache
Referer: http://localhost:9000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36

formData:
------WebKitFormBoundaryJi04kSpfYXB9AWBZ
Content-Disposition: form-data; name="test"; filename="image.png"
Content-Type: image/png


------WebKitFormBoundaryJi04kSpfYXB9AWBZ
Content-Disposition: form-data; name="SystemTag"

PLSS
------WebKitFormBoundaryJi04kSpfYXB9AWBZ
Content-Disposition: form-data; name="Token"

40B8C283F7D339DFD2ABECD77C017C9C
------WebKitFormBoundaryJi04kSpfYXB9AWBZ

看起来像模像样，但是后端是接收不到的。

原因

可以观察一下请求的ContentType。

Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

multipart/form-data这个是没有问题，但是后面有一个boundary，中文意思是分隔符。

这个是用来分割上传的文件、表单字段等。

下面每一个都有一个------WebKitFormBoundaryJi04kSpfYXB9AWBZ。
这个就是用来分割各个文件的。

------WebKitFormBoundaryJi04kSpfYXB9AWBZ
Content-Disposition: form-data; name="test"; filename="image.png"
Content-Type: image/png
------WebKitFormBoundaryJi04kSpfYXB9AWBZ
Content-Disposition: form-data; name="SystemTag"

HXPLM
------WebKitFormBoundaryJi04kSpfYXB9AWBZ
Content-Disposition: form-data; name="Token"

40B8C283F7D339DFD2ABECD77C017C9C
------WebKitFormBoundaryJi04kSpfYXB9AWBZ

而ContentType 里面的boundary就是告诉后端如何取到对应的数据（匹配首尾的分隔符）

说了这么多，现在回归正题。看回发送的请求会发现，表单的分隔符和ContentType分隔符是不一致的。

ContentType 的分隔符是----WebKitFormBoundary7MA4YWxkTrZu0gW

formData的分隔符是------WebKitFormBoundaryJi04kSpfYXB9AWBZ

所以获取不到数据也是正常。

解决方案

ajax请求不能去手动指定ContentType的分隔符，也就是boundary，不仅仅如此，也不可以写成

contentType: “multipart/form-data”

ajax将ContentType设置为false即可，ajax会根据fromData中的数据进行处理分割。

完整的ajax

$.ajax({
         type: 'post',
         url: uplaodUrl,
         data: sendData,
         processData: false,
         contentType:false,
         success: function (ret) {
         },
         error: function (err) {
           console.log('请求失败');
         }
      });