vue实现图片上传至oss,返回url插入数据库,最后在前端页面上回显图片
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);}
上述为个人理解版图片上传并回显,如有错误请评论指正ᕕ(ᐛ)ᕗ
相关文章:
vue实现图片上传至oss,返回url插入数据库,最后在前端页面上回显图片
vue前端上传图像 上传图片 使用上传图片的upload组件 <el-form-item label"设备图像"><el-upload//设置class样式class"avatar-uploader"//绑定上传路径:action"uploadUrl"//携带token值:headers"tokenInfo":show-file-lis…...
C++学习笔记:set和map
set和map set什么是setset的使用 关联式容器键值对 map什么是mapmap的使用map的插入方式常用功能map[] 的灵活使用 set 什么是set set是STL中一个底层为二叉搜索树来实现的容器 若要使用set需要包含头文件 #include<set>set中的元素具有唯一性(因此可以用set去重)若用…...
990-28产品经理:Different types of IT risk 不同类型的IT风险
Your IT systems and the information that you hold on them face a wide range of risks. If your business relies on technology for key operations and activities, you need to be aware of the range and nature of those threats. 您的IT系统和您在其中持有的信息面临…...
wpa_supplicant与用户态程序的交互分析
1 wpa_supplicant与用户态程序wpa_cli的交互过程 1.1 交互接口类型 wpa_supplicant与用户态程序交互的主要接口包括以下几种: 1)命令行界面:通过命令行工具 wpa_cli 可以与 wpa_supplicant 进行交互。wpa_cli 允许用户执行各种 wpa_suppli…...
JavaScript继承 寄生组合式继承 extends
JavaScript继承 1、JS 的继承到底有多少种实现方式呢? 2、ES6 的 extends 关键字是用哪种继承方式实现的呢? 继承种类 原型链继承 function Parent1() {this.name parentlthis.play [1, 2, 3] }function Child1() {this.type child2 }Child1.prototype new Parent1(…...
Nginx 和Tomcat比较
Nginx和Tomcat是两种不同的技术,它们在应用场景、性能、动态处理能力等方面有所区别: 应用场景 Nginx通常用作静态内容服务器或代理服务器,可以将外部请求转发给其他应用服务器,如Tomcat、Django等。而Tomcat则主要用作应用服…...
p18 线性代数,行阶梯型矩阵
行阶梯型矩阵 行最简型矩阵...
leetcode—— 动态规划—— 零钱兑换
给你一个整数数组 coins ,表示不同面额的硬币;以及一个整数 amount ,表示总金额。 计算并返回可以凑成总金额所需的 最少的硬币个数 。如果没有任何一种硬币组合能组成总金额,返回 -1 。 你可以认为每种硬币的数量是无限的。 示…...
java面试题(spring框架篇)(黑马 )
树形图: 一、Spring框架种的单例bean是线程安全吗? Service Scope("singleton") public class UserServiceImpl implements UserService{ } singleton:bean在每个Spring IOC容器中只有一个实例 protype:一个bean的定义可以有多个…...
LeetCode27 移除元素
题目 给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度。不要使用额外的数组空间,你必须仅使用 O(1) 额外空间并 原地 修改输入数组。元素的顺序可以改变。你不需要考虑数组中超出新长度后…...
自测-5 Shuffling Machine(python版本)
文章预览: 题目翻译算法python代码oj反馈结果 题目 翻译 shuffle是用于随机化一副扑克牌的过程。由于标准的洗牌技术被认为是薄弱的,并且为了避免员工通过不适当的洗牌与赌徒合作的“内部工作”,许多赌场使用了自动洗牌机。你的任务是模拟一…...
你真的会设计测试用例吗?
前言 最近干的最多的事情就是设计测试用例、评审测试用例了,于是我不禁又想到了一个经典的问题:如何设计出优秀的测试用例? 可能有些童鞋看到这个问题会有些不以为然,这有什么好想的?干个测试谁还不会设计测试用例&a…...
外贸网站模板建站
测绘检测wordpress外贸主题 简洁实用的wordpress外贸主题,适合做测绘检测仪器设备的外贸公司使用。 https://www.jianzhanpress.com/?p5337 白马非马衣服WordPress外贸建站模板 白马非马服装行业wordpress外贸建站模板,适用于时间服装企业的官方网站…...
多点通信与域套接字:2024/3/4
作业1:广播 发送端: #include <myhead.h> int main(int argc, const char *argv[]) {//1.创建套接字int sfdsocket(AF_INET,SOCK_DGRAM,0);if(sfd-1){perror("socket error");return -1;}printf("sfd%d\n",sfd);//2.设置当前…...
52.2k star! 自己部署gpt4free, 免费使用各种GPT
GPT4Free是一个由开发者Xtekky在GitHub上发布的开源项目,它可以免费地使用GPT-3.5、GPT-4、llama、gemini-pro、bard、claude等多种大模型。截止到当前(2024.1.30)已经有52.2k star,可见其受欢迎程度。 github地址:https://github.com/xtekky…...
【HbuilderX】 uniapp实现 android申请权限 和 退出app返回桌面
目录 android申请权限: 监听用户是否开启权限或关闭权限: 退出app返回桌面: android申请权限: 首先在 manifest.json 内添加你所需要用到权限 添加权限插件 permission.js 一次就好1/权限插件 - Gitee.comhttps://gitee.co…...
计算机网络之传输层 + 应用层
.1 CIDR地址块中还有三个特殊的地址块 a. 前缀 n 32 , 即32位IP地址都是前缀, 没有主机号, 这其实就是一个IP地址, 用于主机路由 b. 前缀 n 31 , 这个地址块中有两个IP地址, 主机号分别为0/1 , 这个地址块用于点对点链路 c. 前缀 n 0 , 用于默认路由使用二叉线索树查找转发…...
五、软考-系统架构设计师笔记-信息安全技术基础知识
信息安全技术基础知识 1、信息安全基础知识概述 信息安全的概念 信息安全包括 5 个基本要素: 机密性:确保信息不暴露给未授权的实体或进程。完整性:只有得到允许的人才能修改数据,并且能够判别出数据是否已被篡改。可用性:得到授权的实体在需要时可以…...
vue3+uniapp在微信小程序实现一个2048小游戏
一、效果展示 二、代码 <template><view class"page"><view class"top"><view class"score">得分:{{total}}</view><view class"time">用时:{{allTime}}s</view></view><view cl…...
常见的浏览器跨域解决方法
1. 前端方法:JSONP(仅适用于GET请求) JSONP(JSON with Padding)是一种利用<script>标签的src属性不受同源策略限制的特性来实现跨域数据请求的方法。JSONP通过在前端动态创建<script>标签,并将…...
docker详细操作--未完待续
docker介绍 docker官网: Docker:加速容器应用程序开发 harbor官网:Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台,用于将应用程序及其依赖项(如库、运行时环…...
css实现圆环展示百分比,根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
ffmpeg(四):滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具,可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下: ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜: ffmpeg…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
【UE5 C++】通过文件对话框获取选择文件的路径
目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 ,这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器,右键点击 .uproject 文件,选择 "Generate Visual Studio project files",重…...
es6+和css3新增的特性有哪些
一:ECMAScript 新特性(ES6) ES6 (2015) - 革命性更新 1,记住的方法,从一个方法里面用到了哪些技术 1,let /const块级作用域声明2,**默认参数**:函数参数可以设置默认值。3&#x…...
Unity VR/MR开发-VR开发与传统3D开发的差异
视频讲解链接:【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...
从零开始了解数据采集(二十八)——制造业数字孪生
近年来,我国的工业领域正经历一场前所未有的数字化变革,从“双碳目标”到工业互联网平台的推广,国家政策和市场需求共同推动了制造业的升级。在这场变革中,数字孪生技术成为备受关注的关键工具,它不仅让企业“看见”设…...
2.2.2 ASPICE的需求分析
ASPICE的需求分析是汽车软件开发过程中至关重要的一环,它涉及到对需求进行详细分析、验证和确认,以确保软件产品能够满足客户和用户的需求。在ASPICE中,需求分析的关键步骤包括: 需求细化:将从需求收集阶段获得的高层需…...
break 语句和 continue 语句
break语句和continue语句都具有跳转作用,可以让代码不按既有的顺序执行 break break语句用于跳出代码块或循环 1 2 3 4 5 6 for (var i 0; i < 5; i) { if (i 3){ break; } console.log(i); } continue continue语句用于立即终…...
