1 官方文档
2 说明
这个组件提供了一种默认的上传模式，点击图片上传的时候就自动把图片发送到服务端，而不是在提交表单的时候上传。
这钟模式不够灵活，也可以设置不自动上传到服务器，自己提交表单的时候上传。下面采取的就是这种方式。
3 新增表单时上传
3.1 form表单及相关代码
点击新增按钮，打开新增窗口
add(){
this.dialogTitle = '新增'
this.tableForm = {}
this.dialogAddVisible = true
this.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-upload
ref='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.data
let msg = result.msg
if(result.code==200){
this.getList('int')
this.dialogAddVisible = false
this.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} = row
this.tableForm = tableForm
this.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-upload
ref='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.data
let msg = result.msg
if(result.code==200){
this.getList('int')
this.dialogAddVisible = false
this.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)
})
}
},
