<el-upload上传图片
1 官方文档
文档
2 说明
这个组件提供了一种默认的上传模式，点击图片上传的时候就自动把图片发送到服务端，而不是在提交表单的时候上传。
这钟模式不够灵活，也可以设置不自动上传到服务器，自己提交表单的时候上传。下面采取的就是这种方式。
3 新增表单时上传
3.1 form表单及相关代码
点击新增按钮，打开新增窗口
add(){this.dialogTitle = '新增'this.tableForm = {}this.dialogAddVisible = truethis.srcList = []},
新增窗口表单
<el-dialog :title="dialogTitle" width="60%" @closed="closedAddOrEdit"><el-form :model="tableForm" ref="tableForm" label-width="120px" ><el-form-item label="金额" prop="money" ><el-input v-model="tableForm.money" style="width:90%" type="number"></el-input></el-form-item><el-form-item label="备注说明" prop="remark" ><el-input v-model="tableForm.remark" style="width:90%" ></el-input></el-form-item><el-form-item label="活动图片"><el-uploadref='upload'action="":auto-upload="false"accept="image/jpg,image/jpeg,image/png":on-change="getImageFile":on-remove="handlePicRemove":file-list="srcList"list-type="picture-card":limit="1"><i class="el-icon-plus"></i><div slot="tip" class="el-upload__tip">只能上传1张图片</div></el-upload></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="saveForm">确 定</el-button><el-button @click="reset">取 消</el-button></div></el-dialog>
数据
data () {return {tableForm:{}, // 存储新增编辑数据srcList:[], // 存储图片文件对象集合：包含名字，地址，图片数据等信息}
}
方法
methods(){// 图片状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
getImageFile(file, fileList) {this.srcList = fileList},//图片移除
handlePicRemove(file, fileList) {this.srcList = fileList},// 保存新增表单方法saveForm(){// 准备参数let formData = new FormData();formData.append('money',this.tableForm.money)formData.append('remark',this.tableForm.remark)this.srcList.forEach(item=>{formData.append('files',item.raw) 图片数据集合，后台用MultipartFile接收})baseWorkApi.addOrEditCarManage(formData,idEdit).then((res) => {let result = res.datalet msg = result.msgif(result.code==200){this.getList('int')this.dialogAddVisible = falsethis.tableForm = {}this.$message({message: msg,type: 'success'})} else {this.$message({showClose: true,message: msg,type: 'error'});}}).catch((error) => {console.log(error)})} else {return false;}})},
}
发送请求到后台
addOrEditCarManage(form,isEdit){
return new Promise((resolve, reject) => {axios.post(url,form).then((response) => {resolve(response)}).catch((error) => {reject(error)})}},
3.2 <el-upload>的属性简介
action=""和:auto-upload="false" 不让它自动上传：
accept 上传文件类型
list-type 文件列表的类型
limit 文件数量限制
file-list 上传的文件列表
on-change 图片状态发生变化时触发
on-remove 移除图片时触发
3.3 提交表单
发送请求时要采用form表单：let formData = new FormData();
参数使用FormData，浏览器会自动解析，采用form表单的发送发送请求
3.4 后台接收
files接收文件集合
PublicCarGasRecordAddVo 对象的参数和表单参数一一对应，接收其它表单参数
@Log(title = "公车使用管理-加油记录管理-添加")@ResponseBody@PostMapping("/add")public AjaxResult add( @RequestParam("files") List<MultipartFile> files, PublicCarGasRecordAddVo vo) throws Exception{OrgEmployee orgemployeeOnJwt = MyJwtUtils.getOrgemployeeOnJwt();LiveUserWeixin liveUserByUserFlagId = MyJwtUtils.getLiveUserByUserFlagId(orgemployeeOnJwt.getEmpid() + "");if(liveUserByUserFlagId != null){vo.setOperateOpenid(liveUserByUserFlagId.getOpenid());}return publiccargasrecordmanagerservice.addOnHt(vo,orgemployeeOnJwt.getEmpid() + "",orgemployeeOnJwt.getEmpname(),files);}
4 编辑
4.1 form表单及相关代码
点击编辑按钮，打开编辑窗口，并且回显表单
edit(row){this.dialogTitle = '编辑'let {...tableForm} = rowthis.tableForm = tableFormthis.dialogAddVisible = true// 图片回显：this.srcList = [] // 初始化图片文件列表为[]// billImageUrlList后台传来的文件路径集合，复制给文件列表row.billImageUrlList.forEach(e => { let arr = { url: e } this.srcList.push(arr) })
},
编辑窗口表单，和新增一样
<el-dialog :title="dialogTitle" width="60%" @closed="closedAddOrEdit"><el-form :model="tableForm" ref="tableForm" label-width="120px" ><el-form-item label="金额" prop="money" ><el-input v-model="tableForm.money" style="width:90%" type="number"></el-input></el-form-item><el-form-item label="备注说明" prop="remark" ><el-input v-model="tableForm.remark" style="width:90%" ></el-input></el-form-item><el-form-item label="活动图片"><el-uploadref='upload'action="":auto-upload="false"accept="image/jpg,image/jpeg,image/png":on-change="getImageFile":on-remove="handlePicRemove":file-list="srcList"list-type="picture-card":limit="1"><i class="el-icon-plus"></i><div slot="tip" class="el-upload__tip">只能上传1张图片</div></el-upload></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="saveForm">确 定</el-button><el-button @click="reset">取 消</el-button></div></el-dialog>
数据，和新增一样
data () {return {tableForm:{}, // 存储新增编辑数据srcList:[], // 存储图片文件对象集合：包含名字，地址，图片数据等信息}
}
方法，和新增一样
methods(){// 图片状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用getImageFile(file, fileList) {this.srcList = fileList},//图片移除handlePicRemove(file, fileList) {this.srcList = fileList},
保存表单，和新增略有不同，
saveForm(){// 表单校验this.$refs['tableForm'].validate((valid) => {if (valid) { // 校验通过var idEdit = false // 标识是否是编辑if(this.tableForm.recordid){idEdit = true} // 准备参数let formData = new FormData();formData.append('money',this.tableForm.money)formData.append('remark',this.tableForm.remark)this.srcList.forEach(item=>{if(item.raw){formData.append('files',item.raw) // 新的图片数据，用MultipartFile集合接收}else{formData.append('oldimgList',item.url) //旧的图片路径集合，后台用字符串集合接收}})baseWorkApi.addOrEditCarManage(formData,idEdit).then((res) => {let result = res.datalet msg = result.msgif(result.code==200){this.getList('int')this.dialogAddVisible = falsethis.tableForm = {}this.$message({message: msg,type: 'success'})} else {this.$message({showClose: true,message: msg,type: 'error'});}}).catch((error) => {console.log(error)})} else {return false;}})},
发送请求到后台
addOrEditCarManage(form,isEdit){
return new Promise((resolve, reject) => {axios.post(url,form).then((response) => {resolve(response)}).catch((error) => {reject(error)})}},
相关新闻
