应用场景：
FormData+Ajax技术实现文件上传
1.FormData使用
FormData是一个构造函数，首先new FormData（），得到一个FormData对象
可以直接使用，直接console会是一个空白的对象，有append方法，delete，get，.......
append(键，值)可以向空白的FormData中追加键值对的数据，
键 数据项的名字，必须是字符串 ； 值 数据项的值，可以是任意类型的数据
直接追加三个数据，但是此时输出fd里是看不到的，不像普通的对象形式。想看到数据，只能get.age，就能看到值，即get.键=值。
const fd=new FormData()
console.log(fd)
fd.append('username','zs')
fd.append('age',20)
fd.append('accd',1312)
console.log(fd) //空的
console.log(fd.get('age')) //20
2.FormData实现文件上传
过程：
input里的type属性是file，就是文件选择。
然后先获取这个输入框，然后就使用FormData，先new，再append，名字，年龄，然后存储文件数据，文本域有change事件。当选择的文件发送了改变，就会触发change事件，所以这里添加一个change事件。
给input添加change事件，只要选择文件就会被改变就会触发事件，即使是第一次选择文件也会触发。
如何获取选择的文件呢？FormData存文件
此时输出this，this指的是当前的文件域，会输出当前的input，打印详细信息，console.dir，就能看到里面的很多属性，有一个属性files
文件域有files属性，里面存着用户选择的文件，files[0] 就是file文件
然后把这个东西append给formdata对象
<input type="file" id="iptfile">
</body>
<script>
let iptfile=document.querySelector("#iptfile")
let fd=new FormData()
fd.append('username','zs')
fd.append('age',23)
//文本域的change事件
iptfile.addEventListener('change',function(){
console.log('change触发') //选择一次触发一次
console.log(this.files[0]) //存的是当前选择的图片
fd.append('imgobj',this.files[0])
fd.forEach((value,key)=>{
console.log(value,key)
})
})
案例-头像上传
文件上传：
1.点击按钮，弹出文件选择框----模拟点击文件的选择器，实现弹框选择文件
通过代码点击文本域，iptfile.cilck，点击上传图片的按钮，反而执行的是选择文件input的click事件
2.实现文件上传
文件上传必须是post，使用formdata，给input添加change事件，[0]是undefined表示用户没有选择文件，所以！0表示上传了文件，return 就阻止后面代码执行，先new formdata，然后append，把图片给对象，然后使用axios发送，data就是dormdata对象
会返回一个url，然后改变路径，把返回的路径和服务器路径结合，就变成了图片的新路径
此时改变文件，网页里的图片也会跟着变化
