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

  • 抖音怎么打开我喜欢的作品给别人看(抖音怎么打开我的橱窗)

    抖音怎么打开我喜欢的作品给别人看(抖音怎么打开我的橱窗)

  • 网易云音乐如何下载音乐(网易云音乐如何显示歌词在桌面)

    网易云音乐如何下载音乐(网易云音乐如何显示歌词在桌面)

  • 6p和6sp屏幕总成通用吗(6p和6sp屏幕总成怎么区分)

    6p和6sp屏幕总成通用吗(6p和6sp屏幕总成怎么区分)

  • 抖音极速版跟抖音短视频有什么区别(抖音极速版跟抖音是一样的吗)

    抖音极速版跟抖音短视频有什么区别(抖音极速版跟抖音是一样的吗)

  • Word快速访问工具栏在哪里(Word快速访问工具栏怎么恢复)

    Word快速访问工具栏在哪里(Word快速访问工具栏怎么恢复)

  • 苹果se2支持快充吗(iphonex支持快充吗)

    苹果se2支持快充吗(iphonex支持快充吗)

  • 手机投屏检测不到电脑(手机投屏检测不到设备怎么回事)

    手机投屏检测不到电脑(手机投屏检测不到设备怎么回事)

  • 手机qq自动回复会到群里去吗(手机QQ自动回复怎么取消)

    手机qq自动回复会到群里去吗(手机QQ自动回复怎么取消)

  • 电脑网络怎么启用dhcp(电脑网络怎么启动设置)

    电脑网络怎么启用dhcp(电脑网络怎么启动设置)

  • ipad登录微信手机会显示吗(ipad登录微信手机能看到吗)

    ipad登录微信手机会显示吗(ipad登录微信手机能看到吗)

  • iphone11充电多久能充满(苹果11充电多久好)

    iphone11充电多久能充满(苹果11充电多久好)

  • 微信电话会议最多几个人(微信会议电话如何使用)

    微信电话会议最多几个人(微信会议电话如何使用)

  • ipad md513zp/a是几代(md513c/a是ipad几)

    ipad md513zp/a是几代(md513c/a是ipad几)

  • iphonexs电池容量多大(iphonexs电池容量79%会掉速吗)

    iphonexs电池容量多大(iphonexs电池容量79%会掉速吗)

  • 怎么把两张照片拼一起(怎么把两张照片拼接到一起)

    怎么把两张照片拼一起(怎么把两张照片拼接到一起)

  • word2010布局在哪里(word页面布局)

    word2010布局在哪里(word页面布局)

  • 抖音评论加载失败啥意思(抖音评论加载失败怎么办)

    抖音评论加载失败啥意思(抖音评论加载失败怎么办)

  • 如何找到自动保存的ppt(如何找到自动保存的excel)

    如何找到自动保存的ppt(如何找到自动保存的excel)

  • 手机qq视频怎么瘦脸(手机qq视频怎么录屏不让对方知道)

    手机qq视频怎么瘦脸(手机qq视频怎么录屏不让对方知道)

  • mate30发布会地点(mate30pro发布会)

    mate30发布会地点(mate30pro发布会)

  • tp面板ap怎么进去设置(tp ap面板设置教程)

    tp面板ap怎么进去设置(tp ap面板设置教程)

  • win10一段时间不动死机(win10一段时间不操作就蓝屏)

    win10一段时间不动死机(win10一段时间不操作就蓝屏)

  • 红米note7pro和note7的区别(红米note7pro和note7屏幕通用吗)

    红米note7pro和note7的区别(红米note7pro和note7屏幕通用吗)

  • linux系统中ctrl和capslock键怎么互换?(linux ctrl c和ctrl z)

    linux系统中ctrl和capslock键怎么互换?(linux ctrl c和ctrl z)

  • 个人哪些捐赠可以税前扣除
  • 中级考试报了三门,只考两门行吗
  • 税务师工作年限是从毕业当天开始计算吗
  • 增值税可以退税嘛
  • 准予以后纳税年度结转扣除的项目有
  • 应扣未扣的个人所得税税收如何处理
  • 查定征收方式适用于什么
  • 银行卡收到养老金是什么意思
  • 分派现金股利会计科目
  • 代订机票款发票可以作为机票报销差旅吗
  • 2018年用2015年的发票入账有什么税务的风险?
  • 国税电子钥匙常见问题解答
  • 一个季度为纳税期限的规定适用
  • 对公账户转法人私人账户用途写什么
  • 企业计提的工资薪金支出可以在税前扣除
  • 回迁安置房税收优惠
  • 国家征收苗木专业合作社成员土地,应该怎样出示证件
  • 业务招待费如何进行纳税调整
  • 发票收到本月进账怎么办
  • 企业医保分几种
  • 帮老板支付的代款怎么做
  • 小规模纳税人月收入超过10万,要交多少税
  • 公司+农户经营模式是什么意思
  • 货款形式返还
  • 进口增值税公式计算公式
  • 一品红怎么养才长得好
  • 制药企业成本核算流程
  • 所得税时间性差异与永久性有关吗
  • element ui el-tree
  • php产品
  • 劳务报酬已扣税是否需报个税
  • 淘宝买建材
  • 图文详解一本通
  • 其他经营收益怎么算
  • thinkphp3.0
  • 预付采购材料款60000元
  • 什么是对公账户和个人账户
  • 定额发票和增值税发票
  • 空调入固定资产几年折旧
  • 不动产租赁专票对房产有无影响
  • SQLite学习手册(SQLite在线备份)
  • 小规模纳税人营业额
  • 交强险还要交车船税?
  • 预收货款方式销售货物,纳税义务发生时间
  • 申报工资金额
  • 报考中级会计师考几科
  • 执行迟延履行金的规定
  • 损益类科目如何记忆
  • 单据 凭证
  • 年金现值系数和复利现值系数的公式
  • 公司支付的培训费需要交税吗
  • 进项税额大于销项税月末结转
  • 已核销的坏账又收回时应当及时入账,防止形成账外款
  • 怎么查对方是一般还是小规模
  • 冲红专票分录
  • 销项税额是负数怎么做账
  • 公司想自己开发票怎么申请
  • 支付工程款如何入账科目
  • 劳务派遣人员能有营业执照吗
  • 交易性金融资产公允价值变动计入
  • ie8 开发者工具
  • xp系统必备软件
  • linux系统基于
  • 如何手动修复模糊图片
  • nod32kui.exe - nod32kui是什么进程 作用是什么
  • linux工具包
  • grid sheet
  • python利用for循环求1到100的奇数之和
  • node.js deno
  • 用python编写
  • javascript用处
  • JavaScript中的数据类型分为两大类
  • viewpager2 bug
  • python 在线运行环境
  • 如何打印个人缴税记录
  • 增值税申报表如何导出
  • 国家税务总局局官网
  • 电子三方协议怎么下载
  • 江苏个体户年报怎么填
  • 税务窗口岗位职责
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设