vue-axios和springboot同时接收(上传)MultipartFile文件和json数据

springboot同时接收MultipartFile文件和json数据

话不多说直接贴代码

后端

用post方式，以@RequestParam接收数据

    @PostMapping("/add")
    public void add(@RequestParam("multipartFiles") MultipartFile[] multipartFiles,@RequestParam("material") String material){
    
    }

前端

api.js中的方法

export function addMaterial(imgfile) {
    
    
    return request({
    
    
        url: '/material/add',
        method: 'post',
        data:imgfile
    })
}

从api.js中导入addMaterial方法

也可以不这样，是可以直接一个axios方法提交的，这里贴的是自己没有改的代码

		add(){
    
    
		//this.multipartFiles是需要上传的文件数组
          let imgfile = new FormData();
          for (let i = 0; i < this.multipartFiles.length; i++) {
    
    
          //此处要和后端参数名对应
            imgfile.append("multipartFiles",this.multipartFiles[i].raw);
          }
          //此处要和后端参数名对应,将对象转换json
          imgfile.append("material", JSON.stringify(this.material));
          //此处我调用的是api.js中的方法
          addMaterial(imgfile)
          .then(response=>{
    
    
            //代码
          })
          .catch(error=>{
    
    
            //代码
          })
        },