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

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