vue中使用elementui的upload组件上传时,解决多个文件只请求一次接口,同时携带实体数据问题,前台及后台的处理方法

本文链接：https://blog.csdn.net/qq_39228609/article/details/115319746

前台:

<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);
}