位置: IT常识 - 正文

【若依框架 RuoYi-Vue Ruo-Yi-Plus 图片回显不显示问题,OSS文件上传】(若依框架入门)

编辑:rootadmin
【若依框架 RuoYi-Vue Ruo-Yi-Plus 图片回显不显示问题,OSS文件上传】 若依框架开发代码生成的图片上传列表不回显问题解决!文章目录若依框架开发代码生成的图片上传列表不回显问题解决!前言一、问题再现1.设计表 person(员工表) 有 id (id) \ name(姓名) \ gender (性别)\ photo (证件照)2.使用若依代码生成功能,导入person表,代码生成3.将生成的代码导入到项目中得到如下列表和表单(插入数据),图片仅在提交、修改表单中回显,列表没有显示,如下图。二、问题解析1.在若依框架中图片上传与回显引用了 components 组件组件中的 ImageUpload 与 ImagePreview2.person.vue 使用ImageUpload组件上传图片3.person.vue 使用ImagePreview组件回显图片,得到的却是OSS回传的oss_id 值,所以在 image-oreview 组件才不回显图片,这时我们需要拿到图片的url地址才是正确的回显方式。4.person.vue为何会出现不回显的情况出现呢?我们找到 components > ImageUpload文件夹二、问题解决1.修改 uploadedSuccessfully 方法2.添加新字段 photos 用来存放图片 url3.修改前端代码与方法4.回显操作完成回显总结前言

推荐整理分享【若依框架 RuoYi-Vue Ruo-Yi-Plus 图片回显不显示问题,OSS文件上传】(若依框架入门),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:若依框架是什么框架,若依框架怎么用,若依框架主要有哪些功能特性,若依框架收费吗,若依框架是什么框架,若依框架视频教程,若依框架视频教程,若依框架是干嘛的,内容如对您有帮助,希望把文章链接给更多的朋友!

使用若依框架进行项目开发的时会用到框架自带的代码生成功能,极大方便我们进行项目开发。基于框架开发肯定会有一些功能需要自行优化定制,在设计数据库表代码生成的同时有图片的展示需求,因此在若依框架中发现了图片在列表中回显不显示的问题,接下来我们看看如何解决该问题。

提示:以下是本篇文章正文内容,下面案例可供参考

一、问题再现1.设计表 person(员工表) 有 id (id) \ name(姓名) \ gender (性别)\ photo (证件照)

2.使用若依代码生成功能,导入person表,代码生成

3.将生成的代码导入到项目中得到如下列表和表单(插入数据),图片仅在提交、修改表单中回显,列表没有显示,如下图。

二、问题解析1.在若依框架中图片上传与回显引用了 components 组件组件中的 ImageUpload 与 ImagePreview//mian.js// 文件上传组件import FileUpload from "@/components/FileUpload"// 图片上传组件import ImageUpload from "@/components/ImageUpload"//*************这是分割线*****************// 全局组件挂载Vue.component('ImageUpload', ImageUpload)Vue.component('ImagePreview', ImagePreview)2.person.vue 使用ImageUpload组件上传图片<el-form-item label="证件照" prop="photo"><image-upload v-model="form.photo"/></el-form-item>3.person.vue 使用ImagePreview组件回显图片,得到的却是OSS回传的oss_id 值,所以在 image-oreview 组件才不回显图片,这时我们需要拿到图片的url地址才是正确的回显方式。 <el-table-column label="证件照" align="center" prop="photo" width="100"> <template slot-scope="scope"> <image-preview :src="scope.row.photo" :width="50" :height="50"/> </template> </el-table-column>

4.person.vue为何会出现不回显的情况出现呢?我们找到 components > ImageUpload文件夹

查看里面的 uploadedSuccessfully 方法和数据关系,我们可以看到上传的过程中用到了OSS对象存储,这时候我们就可以从根源发现问题,在图片上传的时候对象调用了如下方法,因此回显的内容就是 oss_id 而并不是图片的 url 地址。

// 上传结束处理 uploadedSuccessfully() { if (this.number > 0 && this.uploadList.length === this.number) { this.fileList = this.fileList.concat(this.uploadList); this.uploadList = []; this.number = 0; this.$emit("input", this.listToString(this.fileList)); this.$modal.closeLoading(); } },【若依框架 RuoYi-Vue Ruo-Yi-Plus 图片回显不显示问题,OSS文件上传】(若依框架入门)

二、问题解决1.修改 uploadedSuccessfully 方法

在上传图片的过程中,调用了父子组件 $emit 这时发现了什么?我们可以看到在提交图片那里可以使用 @input 来获取调用方法,这时我们可以直接获取到该图片的信息。

//****************修改前 // 上传结束处理 uploadedSuccessfully() { if (this.number > 0 && this.uploadList.length === this.number) { this.fileList = this.fileList.concat(this.uploadList); this.uploadList = []; this.number = 0; this.$emit("input", this.listToString(this.fileList)); this.$modal.closeLoading(); } },//*****************修改后 // 上传结束处理 uploadedSuccessfully() { if (this.number > 0 && this.uploadList.length === this.number) { this.fileList = this.fileList.concat(this.uploadList); this.uploadList = []; this.number = 0; this.$emit("input", this.listToString(this.fileList), this.fileList); this.$modal.closeLoading(); } },

我们在控制台打印一下 this.fileList 可以看到有了我们想要的 url 了

2.添加新字段 photos 用来存放图片 url

随后在后端实体类以及 PersonMapper.xml 添加字段 photos 重新build项目并启动

3.修改前端代码与方法

添加操作:还需在表单重置方法上添加 photos:undefined

//***********修改前 <el-form-item label="证件照" prop="photo"> <image-upload v-model="form.photo"/> </el-form-item>//***********修改后 <el-form-item label="证件照" prop="photo"> <image-upload @input="getImgUrl" v-model="form.photo"/> </el-form-item> // 表单重置 reset() { photos:undefined }

添加 method 方法获取上面我们讲到的 url 并存入到我们新加的字段中去。

getImgUrl(id,item){ this.form.photos=item[0].url },4.回显操作

列表代码:

//*********修改前: <el-table-column label="证件照" align="center" prop="photo" width="100"> <template slot-scope="scope"> <image-preview :src="scope.row.photo" :width="50" :height="50"/> </template> </el-table-column>//*********修改后:在:src="scope.row.photos"处进行了改动 <el-table-column label="证件照" align="center" prop="photos" width="100"> <template slot-scope="scope"> <image-preview :src="scope.row.photos" :width="50" :height="50"/> </template> </el-table-column>完成回显

这时候我们就看到了回显的内容了,重新进行图片上传或修改就能看到图片了,点击查看。 是不是觉得非常有趣呢?觉得有用的话欢迎支持~

总结

每天总结一点经验,都会有量变的结果!

本文链接地址:https://www.jiuchutong.com/zhishi/269577.html 转载请保留说明!

上一篇:Win10两个屏幕配置和切换的方法(win10两个屏幕两个桌面)

下一篇:如何免费获取Win11万能密钥 win11激活码分享 附激活工具(如何免费获取Win11企业版)

  • 怎么订飞机票在手机上(怎么订飞机票在网上订票)

    怎么订飞机票在手机上(怎么订飞机票在网上订票)

  • 抖音账单不能删除吗(抖音账单可以删除吗)

    抖音账单不能删除吗(抖音账单可以删除吗)

  • 淘宝app如何删除评价(怎么删除淘宝app)

    淘宝app如何删除评价(怎么删除淘宝app)

  • 微信怎么没有注册页面(微信怎么没有注册微信号了)

    微信怎么没有注册页面(微信怎么没有注册微信号了)

  • 全球看点怎么进不去了(全球看点怎么玩)

    全球看点怎么进不去了(全球看点怎么玩)

  • 云计算技术与应用是干什么的(云计算技术与应用专业)

    云计算技术与应用是干什么的(云计算技术与应用专业)

  • 小米10微信美颜在哪里(小米10微信美颜功能在哪里设置)

    小米10微信美颜在哪里(小米10微信美颜功能在哪里设置)

  • 淘宝为什么会提醒帮买(淘宝为什么会提示所有产品没有尺码推荐)

    淘宝为什么会提醒帮买(淘宝为什么会提示所有产品没有尺码推荐)

  • 屏幕和手机分离怎么办(屏幕和手机分离修要多少钱)

    屏幕和手机分离怎么办(屏幕和手机分离修要多少钱)

  • 变压器1档高还是3档高(变压器1档高还是3档电压高)

    变压器1档高还是3档高(变压器1档高还是3档电压高)

  • 苹果id退出登录里面东西还在不在(苹果id退出登录后怎么重新登录)

    苹果id退出登录里面东西还在不在(苹果id退出登录后怎么重新登录)

  • 抖音刚发的视频删除有影响吗(抖音刚发的视频删除了重新发有影响吗)

    抖音刚发的视频删除有影响吗(抖音刚发的视频删除了重新发有影响吗)

  • 笔记本电脑怎么换电池(笔记本电脑怎么开机)

    笔记本电脑怎么换电池(笔记本电脑怎么开机)

  • 微信名改了怎么还显示以前的(微信名改了怎么找到这个人)

    微信名改了怎么还显示以前的(微信名改了怎么找到这个人)

  • 华为nova5支持反向充电吗(华为nova5有反向充电功能吗)

    华为nova5支持反向充电吗(华为nova5有反向充电功能吗)

  • 华为手机死机怎么强制重启(华为手机开不了机怎么回事)

    华为手机死机怎么强制重启(华为手机开不了机怎么回事)

  • 爱奇艺怎么观看cctv直播(爱奇艺怎么观看中央一台)

    爱奇艺怎么观看cctv直播(爱奇艺怎么观看中央一台)

  • 开发版和稳定版的区别(开发版和稳定版哪个好)

    开发版和稳定版的区别(开发版和稳定版哪个好)

  • 8p是a几处理器(苹果14pro是什么处理器)

    8p是a几处理器(苹果14pro是什么处理器)

  • 闲鱼超赞记录怎么删除(闲鱼超赞记录怎么关闭)

    闲鱼超赞记录怎么删除(闲鱼超赞记录怎么关闭)

  • 荣耀20s支持nfc吗(荣耀20s支不支持nfc)

    荣耀20s支持nfc吗(荣耀20s支不支持nfc)

  • 手机漏光是什么意思

    手机漏光是什么意思

  • vue怎么设置时长(vue怎么控制时间)

    vue怎么设置时长(vue怎么控制时间)

  • 苹果8p可以下载2个微信吗(苹果8p可以下载2k吗)

    苹果8p可以下载2个微信吗(苹果8p可以下载2k吗)

  • 苹果自带测量工具在哪(苹果手机自带测量工具是哪个)

    苹果自带测量工具在哪(苹果手机自带测量工具是哪个)

  • 华为系统权限管理位置(华为系统设置权限)

    华为系统权限管理位置(华为系统设置权限)

  • 小规模纳税企业
  • 环评费用怎么入账
  • 个人工作室需要注册资金吗
  • 现金流量表抵消分录
  • 生产车间安装监控的目的
  • 个人与公司交的税怎么算
  • 预提费用所得税前扣除
  • 公务接待和商务服务区别
  • 装修期内免租金可以办理营业执照吗
  • 股票回购后多久注销
  • 应收账款预付账款属于什么科目
  • 个体工商户该如何交税
  • 需不需要交企业所得税看报表的哪个地方?
  • 费用报销单与付款申请单的用处区别
  • 核定征收的企业需要汇算清缴吗
  • 全年实现利润总额为6035
  • 违约支付工程款的违约金
  • 差额征税和差额计税
  • 购销合同印花税税率
  • 收到退回残疾金分录
  • 华为手机屏幕变成黑白怎么调回来
  • 如何使用ChapGPT
  • 增值税进项税额转出的情况有哪些
  • 财务差旅费报销制度
  • qq登录界面的设计与实现
  • php多线程怎么实现
  • php中字符串函数
  • 劳务的完成程度可以采用如下方法确定
  • 公司装修款怎么做分录
  • 辅助生产成本是
  • php自定义header
  • 《一文搞懂IoU发展历程》GIoU、DIoU、CIoU、EIoU、αIoU、SIoU
  • jquery弹出层插件
  • php计时函数
  • 一般纳税人销售给小规模纳税人
  • 出口退税率和进项税额
  • 什么情况下专票税率为1
  • 单位社保年底清算
  • 从业人数啥意思
  • SQL Server 2008 Express如何开启远程访问
  • 费用分割单使用范围
  • 税率开错了会影响贷款吗
  • 承兑汇票大回头是什么意思
  • sqlserver数据库事物日志已满
  • 收到法人投资款需要什么手续
  • 固定资产加速折旧计算方法
  • 一般纳税人商贸企业的税负是多少
  • 总分类账与明细分类账平行登记的要点包括
  • 以前期间留抵税额是什么意思
  • 收到银行承兑汇票怎么处理
  • 营改增后房租发票可以抵扣吗
  • 其他业务收入的二级科目
  • 收到合同后的整个流程
  • 总公司可以开发票给分公司吗
  • 行政单位收到银行存款利息的会计分录
  • 商业汇票到期无法兑现
  • 建筑工程拨款申请模板
  • 会计软件入什么科目
  • 年底汇算清缴是什么
  • 货拉拉除了运费还要出钱吗
  • 技术服务发票怎么做成本
  • mysql支持的数据类型主要有哪几类
  • centosrpm安装
  • windows 进程管理
  • win7如何设置多个显示器
  • Win7中TrustedInstaller.exe进程占用内存高该怎么解决?
  • javascript函数大全
  • firefox允许弹出窗口
  • 你必须知道的家长六种类型
  • 仿百度首页
  • JavaScript Break 和 Continue区别教程
  • 使用jQuery加载html页面到指定的div实现方法
  • 青岛地税局 局长
  • 河北电子税务局网上登录
  • 沈阳市房产契税查询
  • 税务局人员调动
  • 火灾损失进项税额怎么处理
  • 湖北省国家税务局历任局长
  • 国家税务总局查询发票
  • 城镇土地使用税减免税政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设