前台代碼
<el-upload class="upload-demo" style="margin-left: 24px;" ref="upload" action="''" accept='.jpg,.png' multiple :limit="2" :on-change="handleUploadFileChange" :on-remove="removeFile" :file-list="accessory" :auto-upload="false" > <el-button slot="trigger" :disabled="params.operation=='view'" size="small" type="primary">選取文件</el-button> <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件,且不超過5MB</div> </el-upload>
handleUploadFileChange(file, fileList) {
this.formData.accessory = fileList;
},
removeFile(file, fileList){
this.formData.accessory = fileList;
}
提交時代碼
// 封裝成 FormData ,用上傳文件請求進行保存 let formData = new FormData(); const params = this.startTaskFormObj.formDataif(params.accessory && params.accessory.length>0) {for(let f of params.accessory) { formData.append("file", f.raw);//需要使用append將文件添加到數據中 } } //以下是 form表單的其他數據 for (const key in params) { if (key === "accessory") { continue; } if (params[key] !== undefined) { formData.append(key, params[key]); } }
//然后post發送數據到后台
后台代碼
@PostMapping(value = "xxx") public AjaxResult start(@RequestParam("file") MultipartFile[] file, @RequestParam Map<String, Object> variables) {}
// file為前台上傳的文件
// variables 為form表單中的數據