当前位置：首页 > news >正文

vue实现图片上传至oss，返回url插入数据库，最后在前端页面上回显图片

news 2025/8/21 5:09:43

vue前端上传图像

上传图片

使用上传图片的upload组件

      <el-form-item label="设备图像"><el-upload//设置class样式class="avatar-uploader"//绑定上传路径:action="uploadUrl"//携带token值:headers="tokenInfo":show-file-list="false"//成功了触发handleAvatarSuccess方法:on-success="handleAvatarSuccess"//之后触发beforeAvatarUpload方法:before-upload="beforeAvatarUpload"><img//显示图片v-if="this.dataForm.image":src="this.dataForm.image"class="avatar"/>//如果没图片就显示icon<i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></el-form-item>

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

data

data() {return {//数据库image字段存放图片的urldataForm: {image: "",},//传过来的路径不能直接使用，需要进行处理imageUrl: "",//上传方式oss以及路径触发方法uploadUrl: this.$http.adornUrl("/tain/warn/ossUpload"),//携带token值的方式tokenInfo: {token: this.$cookie.get("token"),},};},

上传之后将url存入数据库

init(id) {this.dataForm.id = id || 0;this.dialogVisible = true;this.$nextTick(() => {// 新增或修改判断成功弹出后执行查询方法this.$refs["dataForm"].resetFields();this.getDicts("chejian");});if (this.dataForm.id) {this.$http({url: this.$http.adornUrl(`/tain/record/info/${this.dataForm.id}`),method: "get",}).then(({ data }) => {if (data && data.code === 0) {// 将后端传过来的所有数据都绑定到表单this.dataForm = data.recordVo;// 判断严谨 有图片且非空 不为null 0if (this.dataForm.image&&this.dataForm.image.length!=0) {this.imageUrl = this.$http.adornUrl(this.dataForm.image);}}});}},

在这里插入图片描述
上面图片红框框出来的代码是对传过来的url进行处理最后显示为图片

style样式

  <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上传

对oss上传不了解想要尝试的可以点击springboot+vue实现oss文件存储进行了解，或者用其他方式存储的，换个访问的地址即可

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