vue 文件及描述信息一起上传_vue上传多个文件，附件和其他数据一起传给后台...

前端：

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

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">

点击上传

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

}