关于FormData

为什么要使用formData

formData就是按照规定的格式，把form中所有的表单元素的name与value属性组装成一个queryString，省去手工拼接

从零开始创建FormData对象

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); //数字123456会被立即转换成字符串 "123456"

// HTML 文件类型input，由用户选择
formData.append("userfile", fileInputElement.files[0]);

// JavaScript file-like 对象
var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

通过HTML表单创建FormData对象

var formData = new FormData(someFormElement);

var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));

使用FormData对象上传文件

 async  uploadAvatar(){
 //上传头像
 if (this.userInfo) {
 let input = document.querySelector('.profileinfopanel-upload')
 let data = new FormData();
 data.append('file', input.files[0]);
 //添加请求头  通过form添加的图片和文件的格式必须是multipart/form-data
 //方法一
 let config = {
 headers:{'Content-Type':'multipart/form-data'}
 };
 //方法二：在入口js中添加axios请求拦截器
//axios.interceptors.request.use(config=>{ 
//return config；
//}， function (error)
//{
//return Promise.reject(error);
//   }
)
 
  try{
  const {data:res} =await this.$http.post('/eus/v1/users/' + this.userInfo.user_id + '/avatar',data,config)
  console.log(res) 
  if(res.status==1){ 
  this.userInfo.avatar =
  res.image_path;
  this.image_path=res.image_path
 } 
 }
 catch(error){
 this.showAlert = true;                        this.alertText = '上传失败'; 
 throw new Error(error);
 }
 } 
 }

如果你设置正确的配置项，你也可以通过jQuery来使用FormData对象：

 let input = document.querySelector('.profileinfopanel-upload')
 let data = new FormData();
 data.append('file', input.files[0]);
 this.$http({
  url:' /eus/v1/users/' + this.userInfo.user_id + '/avatar',
  type: "POST",
  data: data,
  processData: false,  // 不处理数据
  contentType: false   // 不设置内容类型
});