位置: 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企业版)

  • 小米10s蓝牙耳机怎么连接(小米10S蓝牙耳机设置)

    小米10s蓝牙耳机怎么连接(小米10S蓝牙耳机设置)

  • 怎么卸载华为手机上下载的软件(怎么卸载华为手机上的软件)

    怎么卸载华为手机上下载的软件(怎么卸载华为手机上的软件)

  • type-a接口是什么意思呀(type a 接口)

    type-a接口是什么意思呀(type a 接口)

  • 固态硬盘加机械硬盘会影响速度吗(固态硬盘加机械硬盘有什么好处)

    固态硬盘加机械硬盘会影响速度吗(固态硬盘加机械硬盘有什么好处)

  • svmsung是什么牌子电脑(svmsung是什么牌子电视)

    svmsung是什么牌子电脑(svmsung是什么牌子电视)

  • 虚拟发货什么意思(虚拟发货什么意思咸鱼)

    虚拟发货什么意思(虚拟发货什么意思咸鱼)

  • 91短视频闪退怎么回事(91闪退修复在哪)

    91短视频闪退怎么回事(91闪退修复在哪)

  • 为什么表格打印出来没有格子(为什么表格打印出来是歪的)

    为什么表格打印出来没有格子(为什么表格打印出来是歪的)

  • dvid接口是什么(dvi-d接口有什么用)

    dvid接口是什么(dvi-d接口有什么用)

  • 如何制作背景音乐(如何制作背景音乐视频深深祝福你歌曲)

    如何制作背景音乐(如何制作背景音乐视频深深祝福你歌曲)

  • ps文件太大怎么办(ps文件太大怎么改)

    ps文件太大怎么办(ps文件太大怎么改)

  • vivoy93怎么弄语音助手(vivoy93jovi语音怎么开启)

    vivoy93怎么弄语音助手(vivoy93jovi语音怎么开启)

  • 如何知道对方微信封号(如何知道对方微信是否在线)

    如何知道对方微信封号(如何知道对方微信是否在线)

  • 手机卡空号了怎么办(手机卡空号了怎么激活)

    手机卡空号了怎么办(手机卡空号了怎么激活)

  • 退群后发的图片还在吗(退群的照片)

    退群后发的图片还在吗(退群的照片)

  • 红米按键失灵修复方法(红米手机按键坏了怎么办)

    红米按键失灵修复方法(红米手机按键坏了怎么办)

  • 小米移动电源3高配版能上飞机吗(小米移动电源3 30000毫安)

    小米移动电源3高配版能上飞机吗(小米移动电源3 30000毫安)

  • 手机抖屏怎么解决(手机抖屏影响使用吗)

    手机抖屏怎么解决(手机抖屏影响使用吗)

  • 小米8dc调光怎么开(小米8青春版调光)

    小米8dc调光怎么开(小米8青春版调光)

  • 表格怎么设置自动更新(表格怎么设置自动日期时间)

    表格怎么设置自动更新(表格怎么设置自动日期时间)

  • 快手怎么看访客(快手怎么看访客记录苹果手机)

    快手怎么看访客(快手怎么看访客记录苹果手机)

  • 苹果ipad美版和国行的区别(ipad美版区别)

    苹果ipad美版和国行的区别(ipad美版区别)

  • word的模板在哪儿(word模板在哪个选项卡)

    word的模板在哪儿(word模板在哪个选项卡)

  • 荣耀20pro有什么实用的功能(荣耀20pro有什么功能)

    荣耀20pro有什么实用的功能(荣耀20pro有什么功能)

  • qq离线留言自动回复(qq离线的留言)

    qq离线留言自动回复(qq离线的留言)

  • pavprsrv.exe - pavprsrv是什么进程 有什么用

    pavprsrv.exe - pavprsrv是什么进程 有什么用

  • 最新劳务报酬的个税计算方法?
  • 广交会展务
  • 小规模纳税人需要做进项税吗
  • 计提坏账准备为什么要加借方
  • 材料折扣率
  • 发生检测费用时怎么入账
  • 行政单位发放的政府补贴款
  • 联营企业的持股比例
  • 取得以前年度审计报告应归入阶段底稿
  • 借款利息可以入账吗
  • 应收账款手工核算方法
  • 小规模银行存款多笔小金额财务费用可以合并记账吗?
  • 研发设备一次性计入研发费用账务处理
  • 餐费没有发票怎么入账
  • 发现以前年度未做领料生产的分录怎么处理
  • 模具维修费做什么费用
  • 腾讯电脑管家怎么修复dll
  • PHP:mb_ereg_search_regs()的用法_mbstring函数
  • Win11安装失败怎么办
  • PHP:session_regenerate_id()的用法_Session函数
  • 企业投资者撤回投资款
  • PHP:pg_lo_open()的用法_PostgreSQL函数
  • 医院的重要
  • PHP:imagecreatefromgif()的用法_GD库图像处理函数
  • 防伪税控风险纳税人
  • 房地产企业如何计算土地使用税
  • 存货盘盈盘亏的账务处理
  • 投资收益会计准则
  • 职工参加生育保险
  • 公司给员工购买商业保险报销哪些
  • 工会经费和残保金怎么做账
  • 建行e信通怎么转让
  • 一篇文章让你了解什么
  • vue定时调用方法
  • win11 退回
  • 原始凭证必要时可以涂改
  • JavaScript基础_1
  • 增值税发票退回重开期限
  • 酒店会计科目及账务处理视频
  • 外管证预缴税款怎么做分录
  • 会计上弥补亏损
  • python有什么用
  • 计提加计抵减额在财务报表里哪里体现
  • 固定资产属于有形还是无形资产
  • 财政拨款结转和财政拨款结余以前年度盈余调整
  • 消费税计算的三种形式
  • 建设工程的材料质量检测由谁负责
  • sql server中的编程语言
  • 跨年发票两大原则
  • 跨月管理费用多计怎么处理
  • 简易计税差额抵扣
  • 日后事项中所得税的处理方法
  • 燃油费如何做账会计分录
  • 什么叫应纳税额六年级下册
  • 道路交通事故中施救费应如何处理?
  • 银行现金支票作废处理步骤
  • 城镇土地税需要计税吗
  • sqlserver查看磁盘大小
  • windows2003硬盘分区
  • wcu.exe是什么
  • win7卸载软件提示停止工作
  • rapapp.exe - rapapp是什么进程 有何作用
  • win8系统开机启动项怎么设置
  • 微软 hololive
  • linux命令怎么执行
  • win10 64位系统提示0x80070643错误代码的解决方法
  • linux 防火墙原理
  • sublime text配置node.js调试(图文教程)
  • perl chr
  • 在shell脚本中$用于
  • python中的\r
  • android之handler
  • python内置数据结构有几种
  • unity鼠标控制物体移动
  • Android使用opencv处理图片灰度
  • 在javascript中什么方法可以对数组元素进行排序
  • 税收科研工作思路
  • 最新印花税税目内容
  • e贷支付扣款管理是什么意思
  • 资源税条例实施细则
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设