<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)})}},