前台代码
<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表单中的数据