【Ajax】- 使用 FormData() 实现文件上传

主要的实现步骤：

1、使用文件选择器选择图片文件

2、把用户选择的文件存入 FormData 对象

3、使用 axios 把 FormData 发送给服务器

4、模拟文件选择器的点击事件

let iptFile = document.querySelector('#iptFile')
    // 用户选择文件之后所触发的事件：change
    iptFile.addEventListener('change', function () {
      // console.log(iptFile.value)  拿不到，拿到的只是一个假路径
      // console.log($('form').serialize())  也拿不到，只到空字符串值
      // 使用formdata获取用户所选择文件数据，且文件数据只能使用formdata
      let fd = new FormData(document.querySelector('form'))

      axios.post('/api/formdata', fd).then(res => {
        console.log(res);
      })
    })

`注意：但如果form输入框里面有其他数据，那么传给服务器文件可能传不到，所以可以采取只传文件`

单独传文件 

 则使用到 files 来获取 type属性为file的表单，获取要上传的文件

let iptFile = document.querySelector('#iptFile')	// iptFile是input:file文件域
      // 用户选择文件之后所触发的事件：change
iptFile.addEventListener('change', function() {
  // 收集文件
  // files:当前用户所有文件的文件列表(伪数组)，里面的每一个值都是文件对象
  let myfile = iptFile.files[0]

  let fd = new FormData()
  // appent追加参数到formdata,值可以是任意类型
  fd.append('avatar', myfile)
  // 发起axios请求
  axios.post('http://www.itcbc.com:3006/api/formdata', fd) .then(result => {
      console.log(result)
  })
})