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

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与用户态程序交互的主要接口包括以下几种&#xff1a; 1&#xff09;命令行界面&#xff1a;通过命令行工具 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是两种不同的技术&#xff0c;它们在应用场景、性能、动态处理能力等方面有所区别&#xff1a; 应用场景 Nginx通常用作静态内容服务器或代理服务器&#xff0c;可以将外部请求转发给其他应用服务器&#xff0c;如Tomcat、Django等。而Tomcat则主要用作应用服…...

p18 线性代数,行阶梯型矩阵

行阶梯型矩阵 行最简型矩阵...

leetcode—— 动态规划—— 零钱兑换

给你一个整数数组 coins &#xff0c;表示不同面额的硬币&#xff1b;以及一个整数 amount &#xff0c;表示总金额。 计算并返回可以凑成总金额所需的 最少的硬币个数 。如果没有任何一种硬币组合能组成总金额&#xff0c;返回 -1 。 你可以认为每种硬币的数量是无限的。 示…...

java面试题(spring框架篇)(黑马 )

树形图&#xff1a; 一、Spring框架种的单例bean是线程安全吗&#xff1f; Service Scope("singleton") public class UserServiceImpl implements UserService{ } singleton:bean在每个Spring IOC容器中只有一个实例 protype&#xff1a;一个bean的定义可以有多个…...

LeetCode27 移除元素

题目 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。元素的顺序可以改变。你不需要考虑数组中超出新长度后…...

自测-5 Shuffling Machine(python版本)

文章预览&#xff1a; 题目翻译算法python代码oj反馈结果 题目 翻译 shuffle是用于随机化一副扑克牌的过程。由于标准的洗牌技术被认为是薄弱的&#xff0c;并且为了避免员工通过不适当的洗牌与赌徒合作的“内部工作”&#xff0c;许多赌场使用了自动洗牌机。你的任务是模拟一…...

你真的会设计测试用例吗?

前言 最近干的最多的事情就是设计测试用例、评审测试用例了&#xff0c;于是我不禁又想到了一个经典的问题&#xff1a;如何设计出优秀的测试用例&#xff1f; 可能有些童鞋看到这个问题会有些不以为然&#xff0c;这有什么好想的&#xff1f;干个测试谁还不会设计测试用例&a…...

外贸网站模板建站

测绘检测wordpress外贸主题 简洁实用的wordpress外贸主题&#xff0c;适合做测绘检测仪器设备的外贸公司使用。 https://www.jianzhanpress.com/?p5337 白马非马衣服WordPress外贸建站模板 白马非马服装行业wordpress外贸建站模板&#xff0c;适用于时间服装企业的官方网站…...

多点通信与域套接字:2024/3/4

作业1&#xff1a;广播 发送端&#xff1a; #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上发布的开源项目&#xff0c;它可以免费地使用GPT-3.5、GPT-4、llama、gemini-pro、bard、claude等多种大模型。截止到当前(2024.1.30)已经有52.2k star&#xff0c;可见其受欢迎程度。 github地址&#xff1a;https://github.com/xtekky…...

【HbuilderX】 uniapp实现 android申请权限 和 退出app返回桌面

目录 android申请权限&#xff1a; 监听用户是否开启权限或关闭权限&#xff1a; 退出app返回桌面&#xff1a; android申请权限&#xff1a; 首先在 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 个基本要素&#xff1a; 机密性:确保信息不暴露给未授权的实体或进程。完整性:只有得到允许的人才能修改数据&#xff0c;并且能够判别出数据是否已被篡改。可用性:得到授权的实体在需要时可以…...

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. 前端方法&#xff1a;JSONP&#xff08;仅适用于GET请求&#xff09; JSONP&#xff08;JSON with Padding&#xff09;是一种利用<script>标签的src属性不受同源策略限制的特性来实现跨域数据请求的方法。JSONP通过在前端动态创建<script>标签&#xff0c;并将…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...

掌握 HTTP 请求:理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...