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

  • 戴尔无线鼠标怎么连接电脑(戴尔无线鼠标怎么连接电脑笔记本)

    戴尔无线鼠标怎么连接电脑(戴尔无线鼠标怎么连接电脑笔记本)

  • 小度视频监控怎么查看(小度视频监控怎么删除录像)

    小度视频监控怎么查看(小度视频监控怎么删除录像)

  • 微信能发多长的视频朋友圈(微信能发多长的文字)

    微信能发多长的视频朋友圈(微信能发多长的文字)

  • 无线耳机怎么关(无线耳机怎么关闭电源)

    无线耳机怎么关(无线耳机怎么关闭电源)

  • 微信删人显示删除失败(微信显示删除好友)

    微信删人显示删除失败(微信显示删除好友)

  • wipe cache partition是什么意思(wipe cache partition中文)

    wipe cache partition是什么意思(wipe cache partition中文)

  • 苹果手机的喇叭为什么越来越小(苹果手机的喇叭在哪里)

    苹果手机的喇叭为什么越来越小(苹果手机的喇叭在哪里)

  • risc-v架构是哪个国家的(risc-v架构是什么)

    risc-v架构是哪个国家的(risc-v架构是什么)

  • cpu风扇朝哪个方向(cpu风扇朝哪个方向图解)

    cpu风扇朝哪个方向(cpu风扇朝哪个方向图解)

  • 台式电脑怎么按摄像头(台式电脑怎么按音响)

    台式电脑怎么按摄像头(台式电脑怎么按音响)

  • 抖音发的视频为什么只有自己看到(抖音发的视频为啥没有浏览量)

    抖音发的视频为什么只有自己看到(抖音发的视频为啥没有浏览量)

  • 手机上的腾讯会员可以在电视上用吗(手机上的腾讯会议怎么转到电脑上)

    手机上的腾讯会员可以在电视上用吗(手机上的腾讯会议怎么转到电脑上)

  • 探探可以搜索用户名吗(探探可以搜索用户嘛)

    探探可以搜索用户名吗(探探可以搜索用户嘛)

  • 不是群主怎么删除成员(不是群主怎么删除群相册)

    不是群主怎么删除成员(不是群主怎么删除群相册)

  • 摄像头自带wifi热点什么意思(摄像头自带wifi热点密码是多少)

    摄像头自带wifi热点什么意思(摄像头自带wifi热点密码是多少)

  • 手机相册打不开闪退怎么回事(手机相册打不开查看不了图片)

    手机相册打不开闪退怎么回事(手机相册打不开查看不了图片)

  • 完整的计算机存储器应包括(完整的计算机存储器包括)

    完整的计算机存储器应包括(完整的计算机存储器包括)

  • 天翼网关2.0 2.4g是千兆吗(天翼网关2.0 2.4g是多少兆)

    天翼网关2.0 2.4g是千兆吗(天翼网关2.0 2.4g是多少兆)

  • 华为如何关闭徕卡(华为mate30可以关闭徕卡)

    华为如何关闭徕卡(华为mate30可以关闭徕卡)

  • ps怎么给照片加相框(ps怎么给照片加暗角)

    ps怎么给照片加相框(ps怎么给照片加暗角)

  • qq解除关系是什么意思(qq解除关系有提示吗)

    qq解除关系是什么意思(qq解除关系有提示吗)

  • iphone11pro运行内存(iphone11 11pro运行内存)

    iphone11pro运行内存(iphone11 11pro运行内存)

  • word怎么撤销上一步(word怎么撤销上一步快捷键)

    word怎么撤销上一步(word怎么撤销上一步快捷键)

  • 爱追剧怎么用不了(爱追剧怎么用不了流量)

    爱追剧怎么用不了(爱追剧怎么用不了流量)

  • 小米8se如何设置指纹支付(小米8se如何设置来电铃声)

    小米8se如何设置指纹支付(小米8se如何设置来电铃声)

  • Word如何制作海报(word如何制作海报背景图片)

    Word如何制作海报(word如何制作海报背景图片)

  • 微信猜拳可以控制吗(微信猜拳控制器)

    微信猜拳可以控制吗(微信猜拳控制器)

  • 网络端口被占用(网络端口被占用怎么解决)

    网络端口被占用(网络端口被占用怎么解决)

  • eslint常见报错及解决(eslint不起作用)

    eslint常见报错及解决(eslint不起作用)

  • 高德地图的2种引入方式(高德地图的2种导航方式)

    高德地图的2种引入方式(高德地图的2种导航方式)

  • 增值税申报表如何打印
  • 纳税申报表申报日期
  • 增值税普通发票有什么用
  • 报销单据粘贴单图片
  • 工人工资算生产总值吗
  • 开咨询费需要合同吗
  • 暂估资产会计处理
  • 季报现金流量表是必报表吗
  • 税后是含税还是不含税的意思
  • 退回以前年度所得税费用会计分录
  • 哪些车辆可退还车款
  • 怎样填列分析资产负债表
  • 计提社保费计入什么科目
  • 预交土地增值税怎么计算公式
  • 公司收到一次性吸纳就业补贴款怎么分录
  • 券商买卖股票手续费
  • 进口产品再销售如何缴税
  • 企业收到发要失控发票做进项税额转出如何做税务处理?
  • 有子公司一定要交社保吗
  • 购买商品成本要支付哪些成本
  • 预收款转营业外收入要交增值税吗
  • 未开发票申报
  • 超过三年的坏帐损失税前扣除怎样规定?
  • 自建房房产税计税依据及计算方式
  • 房子转租扣钱吗
  • 银行 委托收款
  • 刚装好的服务器怎么安装
  • 免抵退不得免征和抵扣是什么意思
  • 进项税留抵期限
  • php基础
  • 购入无形资产的增值税税率
  • phpweb框架
  • 分公司改为子公司的所得税业务处理?
  • vue路由传参的几种方式
  • 微信小程序如何删除
  • win11安卓子系统教程
  • php 自定义函数
  • php取字符串
  • 行政事业性收据丢了怎么办
  • 只有发票没有银行怎么办
  • 研发费用怎么体现
  • 银行业的利润率
  • 公司注销其他应付款有余额有影响吗
  • 支付债券发行费怎么算
  • 营业税金及附加计入什么科目
  • 无票收入怎么计算
  • 进项税转出如何结转
  • 小额贷款涉及的法律
  • 房地产采取按揭销售的,其销售的入账时间为
  • 小规模开票的税点是多少
  • 发票验旧就是作废么?
  • 兼职人员属于雇佣人吗
  • 一般纳税人企业所得税政策最新2023
  • 为什么要缴纳残保金
  • 收到保险公司的赔款怎么做账
  • 企业收到待清算商户款项做什么分录
  • 个人承担的社保算公司的费用吗
  • mysql5.7.
  • win10升级win1
  • win8.1电脑设置在哪里
  • windows unistd.h
  • win7系统电脑卡住了怎么办
  • linux管理器
  • glimp使用方法
  • 微信小程序实现人脸识别
  • 常用批处理命令大全
  • dos命令大全及用法
  • 排序方法python
  • python2.7和3.8
  • javascript操作dom对象
  • 安卓焦点
  • find 批处理
  • js实现功能
  • js处理时间
  • 安卓手机照片压缩
  • unity2d角色换装
  • python按位与操作
  • 一季度土地市场
  • 买二手房土地证怎么过户
  • 福建是高原还是平原
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设