前端：
实现多图上传主要用到以下两个属性：
<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);
}
vue上传多个文件，附件和其他数据一起传给后台
原文地址：https://www.cnblogs.com/jcfxl/p/10107926.html