1. 程式人生 > >vue上傳多個檔案,附件和其他資料一起傳給後臺

vue上傳多個檔案,附件和其他資料一起傳給後臺

前端:

實現多圖上傳主要用到以下兩個屬性:

      

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

}