FormData实现文件上传

应用场景：

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实现文件上传

选择图片文件

把用户选择的文件存入FormData对象（也能实现form表单序列化，

使用axios把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，然后改变路径，把返回的路径和服务器路径结合，就变成了图片的新路径

此时改变文件，网页里的图片也会跟着变化