浅谈contentType = false

编程小6 (2) 2024-05-02 14:23

Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说浅谈contentType = false,希望能够帮助你!!!。

在刚接触 JQuery 中的 ajax 时，对其 contentType 并没有很在意，只是知晓它是代表发送信息至服务器时内容编码类型,通俗点说就是告诉服务器从浏览器提交过来的数据格式。
默认值为contentType = "application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。
在这里，我们主要谈谈contentType = false.
在使用ajax上传文件时：

    var formData = new FormData();
    formData.append('headPic', $("#upfile")[0].files[0]);
             $.ajax({
                    url: '/web/headPic',
                    type: 'post',
                    dataType: 'json',
                    cache: false,
                    data:formData,
                    processData: false,
                    contentType: false,
                })
                .done(function(data) {    //上传成功
                    if(data.status == true){
                        console.log("success"); 
                    }else{
                        console.log(data.errMsg);
                    }
                })
                .fail(function() {
                    console.log("GG,failed");
                })
                .always(function() {
                    console.log("complete");
                });

在其中先封装了一个 formData 对象，然后使用 post 方法将文件传给服务器。
这里我们就要先说说http中传输文件的问题。起初，http 协议中没有上传文件方面的功能，直到 rfc1867 为 http 协议添加了这个功能。当然在 rfc1867 中限定 form 的 method 必须为 POST ， enctype = "multipart/form-data" 以及<input type = "file">.
当我们使用表单上传文件时，我们来查看他的Request headers：

发现在 multipart/form-data 后面有boundary以及一串字符，这是分界符，后面的一堆字符串是随机生成的，目的是防止上传文件中出现分界符导致服务器无法正确识别文件起始位置。说到这肯定就要说说这分界符有啥作用呢？
因为对于上传文件，我们没有使用原有的 http 协议，所以 multipart/form-data 请求是基于 http 原有的请求方式 post 而来的.那么来说说这个全新的请求方式与 post 的区别:

请求头的不同，对于上传文件的请求，contentType = multipart/form-data是必须的，而 post 则不是，毕竟 post 又不是只上传文件～。
请求体不同。这里的不同也就是指前者在发送的每个字段内容之间必须要使用分界符来隔开，比如文件的内容和文本的内容就需要分隔开，不然服务器就没有办法正常地解析文件，而后者 post 当然就没有分界符直接以 name = "value"的形似发送。
说到这，我们发现在 JQuery ajax() 方法中我们使contentType = false,这不是冲突了吗？这当然没有，因为当我们查看这时的 Request headers，会发现还是有分界符。这就是因为当我们在 form 标签中设置了enctype = "multipart/form-data",这样请求中的 contentType 就会默认为 multipart/form-data 。而我们在 ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件。

一般来说，你用了content-type=false，可以再加上一个processData = flase，可以参考processData的解释：

processData
类型：Boolean
默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

有兴趣的话可以看看我的私人博客，也可以关注我的公众号，说不定会有意外的惊喜。