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

  • 电热水器的使用方法和技巧(电热水器的使用方法)(电热水器的使用方法教程)

    电热水器的使用方法和技巧(电热水器的使用方法)(电热水器的使用方法教程)

  • 圣女贞德攻略psp(圣女贞德攻略)

    圣女贞德攻略psp(圣女贞德攻略)

  • 微信怎么取消小米会员自动续费(微信怎么取消小号)

    微信怎么取消小米会员自动续费(微信怎么取消小号)

  • wps2019如何修改文字方向(wps2019如何修改默认双面打印)

    wps2019如何修改文字方向(wps2019如何修改默认双面打印)

  • 微信视频号内测资格的作用(微信视频号内测什么时候结束)

    微信视频号内测资格的作用(微信视频号内测什么时候结束)

  • 支付宝收钱怎么添加员工(支付宝收钱怎么开通花呗收款)

    支付宝收钱怎么添加员工(支付宝收钱怎么开通花呗收款)

  • 荣耀hry-al00a什么型号(荣耀hry-al00a手机)

    荣耀hry-al00a什么型号(荣耀hry-al00a手机)

  • 华为手机音响有杂音该怎么解决(华为手机音响有杂音)

    华为手机音响有杂音该怎么解决(华为手机音响有杂音)

  • 电话卡注销需要什么条件(电话卡注销需要在归属地吗)

    电话卡注销需要什么条件(电话卡注销需要在归属地吗)

  • QQ怎么设置使用时间(qq怎么设置使用流量)

    QQ怎么设置使用时间(qq怎么设置使用流量)

  • oppopbcm10是啥型号(oppopbcm10多少钱)

    oppopbcm10是啥型号(oppopbcm10多少钱)

  • 录屏声音小(录屏声音小怎么调大)

    录屏声音小(录屏声音小怎么调大)

  • 淘宝月销量怎么变少了(淘宝月销量怎么变少了2个)

    淘宝月销量怎么变少了(淘宝月销量怎么变少了2个)

  • 找靓机的bs机什么意思(找靓机里bs机能不能买)

    找靓机的bs机什么意思(找靓机里bs机能不能买)

  • 物联网中的uwb是什么(usr物联网)

    物联网中的uwb是什么(usr物联网)

  • 摄像头3mp和4mp和1080p有什么区别(摄像头3mp和4mp和1080p哪个好)

    摄像头3mp和4mp和1080p有什么区别(摄像头3mp和4mp和1080p哪个好)

  • 显卡ultra什么意思(ultra在显卡里指什么)

    显卡ultra什么意思(ultra在显卡里指什么)

  • 华为畅享10plus充电指示灯在哪里(华为畅享10plus充电器参数)

    华为畅享10plus充电指示灯在哪里(华为畅享10plus充电器参数)

  • Reno Ace怎么进行视频编辑(oppo reno ace游戏模式怎么开)

    Reno Ace怎么进行视频编辑(oppo reno ace游戏模式怎么开)

  • 微信文案怎么弄(微信文案怎么弄艺术字)

    微信文案怎么弄(微信文案怎么弄艺术字)

  • 抖音已重置怎么恢复(抖音重置怎么弄)

    抖音已重置怎么恢复(抖音重置怎么弄)

  • 打开抖音显示没有网络怎么办(打开抖音显示没有网络怎么回事)

    打开抖音显示没有网络怎么办(打开抖音显示没有网络怎么回事)

  • 合约机怎么解除合约(合约机怎么解除合约电信停机)

    合约机怎么解除合约(合约机怎么解除合约电信停机)

  • 天下信用注册有危险吗(天下信用干嘛的)

    天下信用注册有危险吗(天下信用干嘛的)

  •  qq被盗了绑了其他手机号怎么办(qq被盗了绑了其他手机号怎么办2022)

    qq被盗了绑了其他手机号怎么办(qq被盗了绑了其他手机号怎么办2022)

  • 爱奇艺如何查询百度钱包交易凭证(爱奇艺如何查询账号)

    爱奇艺如何查询百度钱包交易凭证(爱奇艺如何查询账号)

  • 唯品会解除绑定身份证(唯品会解除绑定银行卡怎么操作)

    唯品会解除绑定身份证(唯品会解除绑定银行卡怎么操作)

  • 代收的水资源税收入是否计入企业所得税
  • 基础电信服务税率和增值电信服务税率
  • 所得税费用属于什么科目借贷方向
  • 库存商品余额在借方
  • 公司购买煤炭的会计分录
  • 库存现金是负数怎么调
  • 第一次购买税控盘
  • 季度超了30万年度没超120
  • 纳税筹划与企业决策
  • 在建工程转固定资产账务处理
  • 计提贷款损失准备金遵循以下原则
  • 17税点变更成16税点
  • 给客户赔偿如何入账
  • 工资预支怎么做账,影响个税吗?
  • 施工费增值税税率是9%
  • 房地产开发经营属于什么行业类别
  • 法人往公户转账需要备注吗
  • 软件企业的税收优惠政策
  • 销售原材料会计分录,款项已收
  • 企业出口退税款属于征收企业所得税么
  • 其他资本公积增加会计处理方法
  • 如何关闭windowsdefender防病毒
  • gif图片查看软件
  • boot mac os from
  • 服务业缴税
  • 收到预付卡发票分录
  • 电脑dwm.exe是什么
  • php工程师职位描述
  • 微信小程序隐藏航班
  • 纳税人购进农产品取得
  • node-gyp版本
  • vue watch监听vuex数据
  • 阿普拉萨
  • php分段
  • phpsql查询
  • 使用php连接多种数据库
  • elementui动态表单数据回显
  • thinkphp import
  • 出售子公司股权不丧失控制权
  • php接口技术
  • 利得都需要缴纳企业所得税吗
  • 子公司借钱给母公司,未收取利息,要纳税吗
  • 公司应知应会的内容是什么
  • Win7 32/64位系统下安装SQL2005和SP3补丁安装教程[图文]
  • 什么是虚开增值发票
  • 个人补缴的医保有钱返吗
  • 缴纳增值税附加税
  • 估价入帐能跨年吗
  • 库存商品过期变成废品
  • 把公司土地转让合法吗
  • 涉外收入申报单怎么填
  • 固定资产清理不及时
  • 工伤费退回会计分录
  • 股权激励费用摊销意思是
  • 公司出售自建厂房
  • 小规模纳税人申报增值税的操作流程
  • 股东 退股
  • 企业控股情况分析报告
  • 补缴企业所得税
  • 登记三栏式现金日记账和银行存款日记账的依据
  • mysql在查询结果中查询
  • xp系统打开浏览器没反应
  • 哪款系统重装软件比较好
  • ntdll.dll no matching
  • macbookpro如何点击
  • win7的网络设置
  • win8修改锁屏壁纸
  • Linux分区详解
  • win7共享文件设置
  • cortana win10
  • win7怎么查看系统位数
  • bootstrap内容
  • 从零基础到入门
  • jquery 图片
  • 安卓无法更新软件
  • 使用image控件显示图片
  • android基础入门教程
  • 重庆市电子发票样式
  • 国家税务处处长
  • 如何查询车辆购置税发票
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设