【Ajax】- Use FormData() para realizar la carga de archivos

Los principales pasos de implementación:

1. Utilice el selector de archivos para seleccionar el archivo de imagen

2. Guarde el archivo seleccionado por el usuario en el objeto FormData

3. Use axios para enviar FormData al servidor

4. Simule el evento de clic del selector de archivos

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

Subir archivos individualmente 

 Luego use archivos para obtener el formulario cuyo atributo de tipo es archivo, y obtenga el archivo para cargar

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)
  })
})