vue前端上传图像

写一个弹窗上传图片

上传图片的方式是oss，在上传之后将url存入数据库，下一步则是在列表上回显

<template><el-dialog:title="'新增'":visible.sync="dialogVisible":close-on-click-modal="false":before-close="handleClose"><el-form :model="dataForm" ref="dataForm"><el-form-item label="设备图像"><el-uploadclass="avatar-uploader":action="uploadUrl":headers="tokenInfo":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="imageUrl" class="avatar" /><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></el-form-item></el-form></el-dialog>
</template><script>
export default {data() {return {dataForm: {image: "",},dialogVisible: false,imageUrl:"",uploadUrl: this.$http.adornUrl("/tain/warn/ossUpload"),tokenInfo: {token: this.$cookie.get("token"),},};},methods: {handleAvatarSuccess(res, file) {// 在控制台输出服务器响应的内容console.log(res);// 使用浏览器的URL API创建一个表示文件对象的URL，并将其赋值给当前上下文的imageUrl属性// 在前端使用这个URL来显示上传的头像this.imageUrl = URL.createObjectURL(file.raw);// 正在更新一个表单数据对象，以包含新上传的头像的URthis.dataForm.image = res.url;},// beforeAvatarUpload：自定义函数// file：待上传的文件beforeAvatarUpload(file) {// 创建一个常量isJPG，检查传入file的类型，isJPG为true，否则为falseconst isJPG = file.type === "image/jpeg";// 创建一个常量isPNG，检查传入file的类型，isPNG为true，否则为falseconst isPNG = file.type === "image/png";// 创建一个常量isLt2M，检查传入文件大小是否夏雄安与2mb 字节转换为mb（兆字节）const isLt2M = file.size / 1024 / 1024 < 2;// 如果上传文件不是jpg或pngif (!(isJPG || isPNG)) {// 显示错误的提示信息，告诉用户'上传头像图片只能是 JPG 或者 png 格式!'this.$message.error("上传头像图片只能是 JPG 或者 png 格式!");}// 如果上传文件不小于2mbif (!isLt2M) {// 显示错误的提示信息，告诉用户'上传头像图片大小不能超过 2MB!'this.$message.error("上传头像图片大小不能超过 2MB!");}// 返回一个布尔值表示文件是否满足所有条件return (isJPG || isPNG) && isLt2M;},init() {this.dialogVisible = true;this.$nextTick(() => {// 新增或修改判断成功弹出后执行查询方法this.$refs["dataForm"].resetFields();});if (this.dataForm.image) {this.imageUrl = this.$http.adornUrl(this.dataForm.image);}//   this.$emit("refreshDataList");},},
};
</script><style>
/* 应用于所有.avatar-uploader类中的.el-upload子元素 */
.avatar-uploader .el-upload {/* 边框样式 */border: 1px dashed #d9d9d9;/* 边框圆角 将四个角的半径都设置为6像素 */border-radius: 6px;/* 鼠标指针在元素上时的样式 手形图标 */cursor: pointer;/* 元素的定位类型 relative相对定位 */position: relative;/* 元素的内容处理在其边界之外的部分 设置为“隐藏” */overflow: hidden;
}
/* 定义了一个当鼠标悬停在.avatar-uploader .el-upload元素上时的样式 */
/* hover 鼠标悬停 */
.avatar-uploader .el-upload:hover {/* 边框颜色 */border-color: #409eff;
}
/* 规则将应用于所有带有.avatar-uploader-icon类的元素 */
.avatar-uploader-icon {/* 字体大小为28像素 */font-size: 28px;/* 元素的颜色 */color: #8c939d;/* 宽度 */width: 178px;/* 高度 */height: 178px;/* 内边距 垂直居中文本 */line-height: 178px;/* 文本在元素内居中对齐 */text-align: center;
}
.avatar {/* 宽度 */width: 178px;/* 高度 */height: 178px;/* 显示类型为块级元素 独占一行 宽度默认为父元素的100% */display: block;
}
</style>

列表回显

使用卡槽

      <el-table-columnprop="image"header-align="center"align="center"label="设备图像"><template slot-scope="scope"><img style="width: 100px; height: 100px" :src="scope.row.image"></template></el-table-column>

后端oss上传的时候就插入数据库

    @Autowiredprivate AliOSSUtil aliOSSUtil;@Autowiredprivate ITainRecordService iTainRecordService;//oss@PostMapping("/ossUpload")public R ossUpload(MultipartFile file) throws IOException {String url = aliOSSUtil.upload(file);  // 返回文件的上传路径，访问这个url即可下载TainRecord record = new TainRecord();record.setImage(url);iTainRecordService.saveOrUpdate(record);return R.ok().put("url",url);}