一、表格显示地方需要改动的地方
<el-table-column label="品牌logo地址" align="center" prop="logo" >
<template slot-scope="scope">
<el-image
style="width: 100px; height: 100px"
:src="pjtUrl+scope.row.logo"
>
</el-image>
</template>
</el-table-column>
这个地方的logo就是你实体类中的图片地址
二、新增或者修改时弹出的对话框
<el-form-item label="图片地址" prop="logo" label-width="40">
<el-upload
:action="imgUpload.url"
:headers="imgUpload.headers"
list-type="picture-card"
:limit="limit"
:on-exceed="handleExceed"
:on-success="handlePictureSuccess"
:before-upload="beforeAvatarUpload"
:on-preview="handlePictureCardPreview"
:file-list="fileList"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" v-if="imageUrl" :src="imageUrl" alt="一个图片">
</el-dialog>
</el-form-item>
三、需要导入的文件
import { getToken } from "@/utils/auth";
四、data部分
pjtUrl: process.env.VUE_APP_BASE_API,
// 图片数量限制
limit: 1,
//页面上存的暂时图片地址List
fileList: [{url: ""}],
//图片地址
imageUrl: "",
dialogVisible: false,
imgUpload: {
// 设置上传的请求头部
headers: {
Authorization: "Bearer " + getToken()
},
// 图片上传的方法地址:
url: process.env.VUE_APP_BASE_API + "/rechargeEquity/equity/upload",
},
/rechargeEquity/equity/upload这个是你的后端代码的controller层路径
五、method部分
//图片上传前的相关判断
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type == 'image/png';
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isJPG) {
this.$message.error('上传图片只能是 JPG/PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 5MB!');
}
return isJPG && isLt2M;
},
//图片预览
handlePictureCardPreview(file) {
this.imageUrl = file.logo;
this.dialogVisible = true;
},
//图片上传成功后的回调
handlePictureSuccess(res, file) {
//设置图片访问路径 (fileUrl 后台传过来的的上传地址)
this.imageUrl = file.response.logo;
//下面是为了将图片信息存入数据库准备
this.form.logo = file.response.logo;
},
// 文件个数超出
handleExceed() {
this.$modal.msgError(`上传链接LOGO图片数量不能超过 ${this.limit} 个!`);
},
这个地方几乎不需要改,只需要把logo换成你们具体对应实体类中的字段
1、表单重置需要改的地方
// 表单重置
reset() {
this.fileList = undefined;//加的是这一行
this.form = {
id: null,
equityId: null,
name: null,
logo: null,
categoryId: null,
createTime: null,
editTime: null,
endTime: null,
createBy: null,
sort: null,
status: null
};
this.resetForm("form");
},
这里只需要加最上面一行
2、修改按钮需要改的地方
/** 修改按钮操作 */
handleUpdate(row) {
this.flag=false;
this.imageUrl =this.pjtUrl+row.logo
const id = row.id || this.ids
getEquity(id).then(response => {
this.fileList = [{ url: this.imageUrl}]//加的是这一行
this.form = response.data;
this.form.logo=this.pjtUrl+response.data.logo;
this.open = true;
this.title = "修改直冲产品品牌";
});
},
3、提交按钮需要改的地方
/** 提交按钮 */
submitForm() {
this.form.logo = this.imageUrl; // 注:重要(用于添加到数据库),加的是这一行
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateEquity(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addEquity(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
六、后端代码
@PostMapping("/upload")
public AjaxResult uploadFile(MultipartFile file) throws IOException
{
if (!file.isEmpty())
{
// 上传文件路径(上传文件存放磁盘位置)
String logo=FileUploadUtils.upload(QhfConfig.getUploadPath(),file);
if(!StringUtils.isEmpty(logo)){
AjaxResult ajax = AjaxResult.success();
ajax.put("logo",logo);
return ajax;
}
}
return AjaxResult.error("上传图片异常,请联系管理员");
}