本实例使用@RequestPart注解同时接受上传文件和json数据。支持json数据自动解析注入为java对象
需要用到vue上传文件组件 el-upload,请自行引入。
vue端页面代码:
<el-upload
ref="upload"
class="upload-demo"
drag
action="#"
:auto-upload="false">
<i class="el-icon-upload"/>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
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<String, Object> postInfo){
// 具体业务逻辑
return null;
}
页面显示效果: