Vue组件+Spring boot自定义上传文件同时传输json数组

本实例使用@RequestPart注解同时接受上传文件和json数据。支持json数据自动解析注入为java对象

需要用到vue上传文件组件 el-upload，请自行引入。

vue端页面代码：

  
  
将文件拖到此处，或点击上传
  
只能上传jpg/png文件，且不超过500kb

 vue端提交文件及json数据代码：

upload: function(id) {
      let file = this.$refs.upload.uploadFiles[0].raw;
      let formData = new FormData();
      formData.append('file', file);
      formData.append("postInfo", new Blob([JSON.stringify({"title": "测试标题", "type": 3})], {type: "application/json"}));

      axios.post(`/api/post`, formData, {headers: {'Content-Type': 'multipart/form-data'}})
        .then(response => {

        }).catch(() => {
      });
}

后端java代码：

@ApiOperation("上传图片")
@PostMapping
public BaseResult add(@RequestPart MultipartFile file, @RequestPart Map postInfo){
    // 具体业务逻辑
	return null;
}

 页面显示效果：