vue项目中一张图片文件和表单参数同时上传

组件 

<van-uploader v-model="uploader" :max-count="1" ref="imgInstance" :after-read="onRead" :before-delete="onDelete />
                  

参数设置

data () {
    return {
        fileData: null,
        uploader: [],    
    }
  },

onRead方法:

onRead (file) {   
	  this.fileData = file.file;
	  return true;
	},

onDelete方法(删除选中的文件)

onDelete(file, info){
        //this.fileData.splice(info.index, 1);//根据图片索引进行删除
        //因为我是一张图片,只需要把它置为空
        this.fileData=null;
	    return true;
	},

数据封装上传

onHandle(){
let formData = new FormData()
//文件
formData.append('file', this.fileData);
//表单参数
formData.append(key,value);
},
this.$http({
              method: 'post',
              url: XXXXXXXXXXXX
              headers:{ 'Content-Type': 'multipart/form-data'},
              transformRequest:[],
              data: formData
      }).then(res => {
    }).catch(()=>{
});

后端接口

 @PostMapping("/appInviteOne")
 public Result appInviteOne(@RequestParam(value = "file") MultipartFile file, Map<String,String> params){
        return  new Result();
    }