【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输入框里面有其他数据，那么传给服务器文件可能传不到，所以可以采取只传文件`

ファイルを個別にアップロードする 

 次に、ファイルを使用して、タイプ属性が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)
  })
})