vue上传多个文件，附件和其他数据一起传给后台

Posted 2021-01-26 Jack

前端：

实现多图上传主要用到以下两个属性：

      

<el-form-item label="附件上传" label-width="80px">

　　   

<el-form-item label="附件上传" label-width="80px">

<el-upload

style="padding-left:0px"

class="upload-demo"

action="admin/zuul/lcloud-elis-rms-gwb/um/rmsAnnex/upload"

:on-preview="handlePreview"

:on-remove="handleRemove"

:before-remove="beforeRemove"

:data="{idSalesTccUserNotetice:form.idSalesTccUserNotetice }"

multiple

:auto-upload="false"

:http-request="uploadFile"

ref="upload"

:limit="5"

:on-exceed="handleExceed"

:file-list="fileList">

<el-button size="small" type="primary">点击上传</el-button>

</el-upload>

</el-form-item>

</el-form-item>

　　  

 

   

uploadFile(file){

this.formDate.append(‘file‘, file.file);

},

//发布

saveProject1(){

this.formDate = new FormData()

this.$refs.upload.submit();

var uid = JSON.parse(window.sessionStorage.getItem("keyLimit")).username;

this.formDate.append(‘noticeTitle‘, this.form.noticeTitle);

this.formDate.append(‘noticeType‘, this.form.noticeType);

this.formDate.append(‘isPublic‘, this.form.isPublic);

this.formDate.append(‘note‘, this.form.note);

this.formDate.append(‘idSalesTccUserNotetice‘, this.form.idSalesTccUserNotetice);

this.formDate.append(‘uid‘, uid);

let config = {

headers: {

‘Content-Type‘: ‘multipart/form-data‘

}

}

this.axios.post("admin/zuul/lcloud-elis-rms-gwb/um/userNotice/save",this.formDate,config).then(res=>{

if(res.code == ‘0‘){

if(res.object.status == 200){

this.$emit(‘close‘);

this.$emit(‘getNoticeList‘);

 

}

}

}).catch(err => {

     console.log(err)                    

     })

},

 

java后台：

   

@ResponseBody
@RequestMapping("/save")
public TResult insert (@RequestParam("file") MultipartFile[] file,@RequestParam("noticeTitle") String noticeTitle,
@RequestParam("noticeType") String noticeType,@RequestParam("isPublic") Integer isPublic,@RequestParam("note") String note,
@RequestParam("uid") String uid,HttpServletRequest request) {
TResult result = new TResult();
System.out.println(file.length);

}