Vue 使用formData方式向后台发送数据的实现

<input class="file" name="file" type="file" aept="image/png,image/gif,image/jpeg" @change="update"/>

update (e) {
  let file = e.target.files[0]
  // console.log(file)
  let param = new FormData() // 创建form对象
  param.append('file', file, file.name) // 通过append向form对象添加数据
  param.append('id', this.$store.state.userId) // 添加form表单中其他数据
   // withCredentials: true 使得后台可以接收表单数据 跨域请求
  const instance = axios.create({
    withCredentials: true
  })
  // url为后台接口
  instance.post('url', param)
    .then(this.su) // 成功返回信息 调用函数 函数需自己定义，此处后面省略
    .catch(this.serverError) // 服务器错误 调用对应函数 函数需自己定义，此处后面省略
}