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

  • 微博陌生登录提醒设置方法是什么(微博陌生登录提醒是什么意思)

    微博陌生登录提醒设置方法是什么(微博陌生登录提醒是什么意思)

  • 华为nova4带无线充电吗(华为nova4无线充电怎么开启)

    华为nova4带无线充电吗(华为nova4无线充电怎么开启)

  • 为什么苹果手机下载不了小红书(为什么苹果手机信号弱)

    为什么苹果手机下载不了小红书(为什么苹果手机信号弱)

  • 钉钉打电话为什么没有来电通知(钉钉打电话为什么没有声音)

    钉钉打电话为什么没有来电通知(钉钉打电话为什么没有声音)

  • 微信公众号草稿恢复(微信公众号草稿箱继续编辑后怎样发送)

    微信公众号草稿恢复(微信公众号草稿箱继续编辑后怎样发送)

  • 安培和毫安的换算(1安培等于多少毫安培)

    安培和毫安的换算(1安培等于多少毫安培)

  • 笔记本电脑返回键是哪个(笔记本电脑返回上一步)

    笔记本电脑返回键是哪个(笔记本电脑返回上一步)

  • 南瓜影视下载的视频在哪个文件夹(南瓜影视下载的文件在哪)

    南瓜影视下载的视频在哪个文件夹(南瓜影视下载的文件在哪)

  • iphone6多长(iphone6手机多长)

    iphone6多长(iphone6手机多长)

  • 1m和1mb有什么区别(1mb与m有什么区别)

    1m和1mb有什么区别(1mb与m有什么区别)

  • 手机qq被禁言怎么强制聊天(手机qq禁言怎么解除)

    手机qq被禁言怎么强制聊天(手机qq禁言怎么解除)

  • 说说没发成功怎么删除(未发表的说说在哪里)

    说说没发成功怎么删除(未发表的说说在哪里)

  • 华为荣耀6plus能不能使用移动网络(华为荣耀6plus能用微信吗)

    华为荣耀6plus能不能使用移动网络(华为荣耀6plus能用微信吗)

  • 酷喵vip能登录几个电视(酷喵vip能登录几台电视)

    酷喵vip能登录几个电视(酷喵vip能登录几台电视)

  • TP-LINK验证码验证失败怎么回事(tplink安全码获取验证码)

    TP-LINK验证码验证失败怎么回事(tplink安全码获取验证码)

  • 抖音注销后还能实名吗(抖音注销后还能申请吗)

    抖音注销后还能实名吗(抖音注销后还能申请吗)

  • 苹果旁白模式是干嘛的(iphone旁白)

    苹果旁白模式是干嘛的(iphone旁白)

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

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

  • 微信头像五星红旗怎么弄(微信头像五星红旗下面有个刘)

    微信头像五星红旗怎么弄(微信头像五星红旗下面有个刘)

  • qq自动下载微视怎么取消(qq自动下载的微视安装包在哪)

    qq自动下载微视怎么取消(qq自动下载的微视安装包在哪)

  • 电话拉黑信息看得到吗(电话拉黑信息能看到不)

    电话拉黑信息看得到吗(电话拉黑信息能看到不)

  • 惠普如何进入bios设置(惠普如何进入bios设置xmp)

    惠普如何进入bios设置(惠普如何进入bios设置xmp)

  • 空格键是哪个(电脑空格键是哪个)

    空格键是哪个(电脑空格键是哪个)

  • Linux如何给文件权限? linux给文件添加可执行权限的技巧(Linux如何给文件赋予内容)

    Linux如何给文件权限? linux给文件添加可执行权限的技巧(Linux如何给文件赋予内容)

  • nethogs命令  实时统计网络带宽使用率工具(net命令详解步骤)

    nethogs命令 实时统计网络带宽使用率工具(net命令详解步骤)

  • 计算增值税时要包括关税吗
  • 车辆购置税计入成本吗
  • 如何合伙注册公司
  • 工程公司的材料员在哪里考试
  • 免税蔬菜税额用什么表示
  • 没有发票的费用可以抵扣企业所得税吗
  • 资产负债表预收账款期末余额怎么算
  • 营业外收入期末结转
  • 售楼部垃圾桶
  • 固定资产折旧成本费用科目
  • 没有进货发票怎么处罚
  • 小规模纳税人购入货物收到增值税专用发票
  • 多转出的进项税能否转回
  • 建筑公司资源税的征税
  • 长期股权投资佣金手续费计入
  • 费用报销审批单填写样本图片
  • 应付账款少说明什么
  • 预提费用怎么理解
  • 五月份和六月份都有什么节日
  • 税控盘提示未抄报税
  • 外汇的收入
  • win7原版系统安装后没有任何驱动
  • 如何看懂财务报表的书
  • win7网络适配器不见了怎么恢复
  • 如何使用php
  • vue3props用法
  • 黑白相间表带
  • 销售退换货的账务处理
  • trainer 平替
  • 委托第三方收款合法吗
  • 二手车交易发票怎么收费
  • 工会经费缴纳方式的文件
  • python数据编程
  • mongodb import
  • 股东借款作为项目投入的依据
  • 年终奖影响社保缴费基数吗
  • 职工教育经费的比例是多少
  • 增值税电子普通发票和专票的区别
  • 购进废旧物资进项税额
  • mongodb如何备份
  • 暂估入库账务处理举例
  • 企业所得税计提的准备金可以扣除吗
  • 未支付怎么取消
  • 一般纳税人其他咨询服务税率
  • 主营业务成本工资写什么部门
  • 现金余额出现负数的原因
  • 工会经费购买的固定资产处置
  • 企业发生坏账损失时,在当期确认坏账损失
  • 专项费用会计分录
  • 广告费和业务宣传费税前扣除基数
  • 公司有外籍人员怎么办
  • 差旅费政策
  • 党委经费是国家政府出吗?
  • 以前年度账务错误应该怎么处理的
  • 固定资产报废由谁审批
  • 残保金是公司交还是员工交
  • 异地成立子公司能用母公司的名称吗?
  • 年底结账会计处理
  • 个体户需要报税吗?需要报哪些税?
  • sql server不可用或不存在什么意思
  • ubuntu系统安装无线网卡驱动
  • mysql数据备份的方式
  • win10预览版退回正式版
  • freebsd中文手册
  • xp系统鼠标右键无法弹出菜单
  • mac steam一直更新
  • GHOST XP 安装教程
  • Ghost XP SP3 (雨林木风)纯净版 Y5.1下载
  • win8自启动在哪儿设置
  • windows10升级后
  • 新浪微博 app 安卓
  • javascript教程chm
  • linux使用adb
  • 查看shell脚本是否在运行
  • bootstrap要学到什么程度
  • js选中单选按钮
  • 率土之滨怎么提高建设值上限
  • 陕西国税电子税务局app
  • 增值税号和增值税账号的区别
  • 广东佛山税务局人工电话是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设