2020-11-21

Ajax上传文件的cache、processdata、contentType属性以及FormData对象的总结

一、使用场景

如果要用 Ajax 上传文件，则需要使用 FormData 对象来作为数据，并且需要设置相关的几个重要属性cache、pocessData（pd）、contentType（ct）。

二、操作过程

代码如下：

var fd = new FormData()
fd.append('avatar', files[0])
$.ajax({
                method: 'POST',
                url: 'url',
                data: fd,
                cache:false,
                processData: false,
                contentType: false,

                success: function (res) {
                    var url = 'url' + res.url
                    $('img').attr('src', url)
                }

            })

Ajax属性：cache、processData、contentType

① cache：缓存

当发起一次请求后，会把获得的结果以缓存的形式进行存储，当再次发起请求时， cache默认值是 true ，那么会直接从缓存中读取，而不是再次发起一个请求了，上传文件时设置为false。
从 cache 的工作原理可以得出，cache 的作用一般只在 get 请求中使用。

② processData：处理数据

processData 默认值是 true，代表的是以对象的形式上传的数据都会被转换为字符串的形式上传。而当上传文件的时候，则不需要把其转换为字符串，因此要改成false

③ contentType：发送数据的格式

contentType默认值是application/x-www-form-urlencoded 代表的是 ajax 的 data 是以字符串的形式 如id=2019&password=123456
使用这种传数据的格式，无法传输复杂的数据，比如多维数组、文件等 所以要将格式设置为false
和 contentType 有个类似的属性是 dataType ， 代表的是期望从后端收到的数据的格式，一般会有 json 、text……等
而 contentType 则是与 dataType 相对应的，其代表的是 前端发送数据的格式