vue中使用elementui的upload组件上传时,解决多个文件只请求一次接口,同时携带实体数据问题,前台及后台的处理方法
前台:
<el-upload list-type="picture"
ref="upload"
action=""
:limit="6"
:auto-upload="false" //不自动上传
:http-request="pushPictures" //覆盖组件的默认上传方法
:file-list="fileList" >
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
在data中创建一个表单数据formData,goods用来存放实体的其他表单数据:
data(){
return{
goods:{
categoryId:'',
title:'',
price:'',
oldLevel:'',
des:''
},
formData:new FormData(),
}
}
// 将上传的图片添加到表单数据中
pushPictures(param){
this.formData.append("pictures",param.file);
},
点击上传提交时,触发upload组件的上传:
//提交上传
submit(){
debugger;
let _this=this;
this.$refs.upload.submit();
//触发upload组件的上传,会自动调用http-request里的回调函数,也就是自己编写的pushPictures()方法,有几张图就会push几次
let id = this.goods.categoryId;
this.goods.categoryId=id[id.length-1];
let goods = JSON.stringify(this.goods);
//将实体数据转换为json传递,不然formdata在传递时无法携带goods对象,只能携带普通表单参数,后台springmvc无法解析获得实体
this.formData.append("goods",goods);
this.$axios.post("/goods/addGoods",this.formData,{headers:{'Content-Type':'multipart/form-data'}})
}
后台:
通过MultipartFile[] 接收文件,并且使用fastjson来解析json获取实体
@PostMapping("/addGoods")
public Result addGoods(@RequestParam("pictures") MultipartFile[] files,@RequestParam("goods") String json) throws IOException {
DealItem goods= JSON.parseObject(json,DealItem.class);
}
