向后端传图片无法接收参数踩坑记

       最近写一个上传图片的js方法，习惯性的复制以前的前端页面改吧改吧就写好了。根据以前一模一样的前端JS以及后端写法写完之后却发现图片传不上去，参数也接不到，但是接口可以访问。开始了解决问题的踩坑之旅。

       首先想到的就是上次自己写的一个方法可以，于是拿过去疯狂对比愣是没有发现什么问题。然后把参数精简到一个字符串发现都无法上传更是困惑，接着久开始了漫无目的的百度。无一例外都是教你设置 contentType: false ，与我的代码也几番神似：

<script>
$("#save").click(function () {
    var fd = new FormData();
    fd.append("img",imgUpload);
    $.ajax({
        type: "post",
        url: "/saveDesignOrder.do",
        data: fd,
        dataType: 'json',
        processData: false,
        contentType: false,
        success: function (data) {
            //成功
        }
    });
})
</script>

后端配置 multipartResolver 根据项目情况在对应xml配置或者对应java配置文件配置 这块网上很多代码。

我这边对应的代码都写了，但翻了好久也没有解决方案，后面想到追其本源去查看传参接受参数的原理，发现这个contentType这个位置实际上是设置的数据编码方式。然后使用谷歌浏览器的Network开始查看这两个同样的写法下 访问是否有区别。惊讶的发现，可以上传的是这样的：

然而不可以上传的是这样的：

发现不一样了么，Content-Type一栏，在代码中虽然都写着：

contentType: false

       但是实际上一个依旧是这样，另外一个实则进行了转化，看到这里我还是百思不得其解，想了一会突然灵光开窍。既然代码是一模一样的，那难道是实现实际不一样，然后立马我想到了$.ajax方法是jquery实现的方法，接着就想到难道是jquery版本不一致实现方式不同的原因？果然，这次复制的页面比较老，用了一个远古时期的jquery版本。而可以的那个页面当时是自己写的，用的jquery也比较新。替换jquery版本解决上传得不到参数的问题。

 

       唉，都说是搬砖，复制已经变为常态，但是复制后产生问题的原因应该多想想，积累总结一下，这种问题也不至于探索这么久。因为真的没有在网上搜到这次解决问题的答案，所以分享一下，避免有人跟我一样丢人，甚至有的人最后也没解决。究其根本这次解决得比较慢，一来是对http协议不够了解、二来后端对前端不少东西也不够深入、最主要得原因还是犯的错少了（√ ）。