vue实现图片上传至oss，返回url插入数据库，最后在前端页面上回显图片
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-upload
class="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);
// 正在更新一个表单数据对象，以包含新上传的头像的UR
this.dataForm.image = res.url;
},
// beforeAvatarUpload：自定义函数
// file：待上传的文件
beforeAvatarUpload(file) {
// 创建一个常量isJPG，检查传入file的类型，isJPG为true，否则为false
const isJPG = file.type === "image/jpeg";
// 创建一个常量isPNG，检查传入file的类型，isPNG为true，否则为false
const isPNG = file.type === "image/png";
// 创建一个常量isLt2M，检查传入文件大小是否夏雄安与2mb 字节转换为mb（兆字节）
const isLt2M = file.size / 1024 / 1024 < 2;
// 如果上传文件不是jpg或png
if (!(isJPG || isPNG)) {
// 显示错误的提示信息，告诉用户'上传头像图片只能是 JPG 或者 png 格式!'
this.$message.error("上传头像图片只能是 JPG 或者 png 格式!");
}
// 如果上传文件不小于2mb
if (!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-column
prop="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上传的时候就插入数据库
@Autowired
private AliOSSUtil aliOSSUtil;
@Autowired
private 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);
}
原文地址：https://blog.csdn.net/qq_52879387/article/details/136380231
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！