前端:
实现多图上传主要用到以下两个属性:
<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);
}