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

  • c++ try catch(c++ try catch捕获不到异常)

    c++ try catch(c++ try catch捕获不到异常)

  • 腾讯会议等候室是直接进去吗(腾讯会议等候室界面)

    腾讯会议等候室是直接进去吗(腾讯会议等候室界面)

  • 芭芭农场肥料工厂怎么开启(芭芭农场肥料工厂)

    芭芭农场肥料工厂怎么开启(芭芭农场肥料工厂)

  • 蓝牙耳机有必要买吗(蓝牙耳机有必要买贵的吗)

    蓝牙耳机有必要买吗(蓝牙耳机有必要买贵的吗)

  • 微信被投诉封了,要什么时候才可以用(微信被投诉封了不用自助解封能自然解封吗)

    微信被投诉封了,要什么时候才可以用(微信被投诉封了不用自助解封能自然解封吗)

  • 为什么手机蓝牙可以连接但是播不了(为什么手机蓝牙搜索不到车载蓝牙)

    为什么手机蓝牙可以连接但是播不了(为什么手机蓝牙搜索不到车载蓝牙)

  • 电脑微信怎么扫一扫(电脑微信怎么扫码看直播)

    电脑微信怎么扫一扫(电脑微信怎么扫码看直播)

  • 小米手环4收不到微信通知(小米手环4收不到微信消息怎么回事苹果手机)

    小米手环4收不到微信通知(小米手环4收不到微信消息怎么回事苹果手机)

  • ios能分屏吗(苹果ios可以分屏吗)

    ios能分屏吗(苹果ios可以分屏吗)

  • 飞行模式来电有记录吗(飞行模式来电有声音吗)

    飞行模式来电有记录吗(飞行模式来电有声音吗)

  • 爱奇艺为什么叫猕猴桃(爱奇艺为什么叫大厂)

    爱奇艺为什么叫猕猴桃(爱奇艺为什么叫大厂)

  • 为什么充电到80就不动了(为什么充电到80就停了)

    为什么充电到80就不动了(为什么充电到80就停了)

  • 华为不能自动连接WIFI(华为不能自动连接车载蓝牙了)

    华为不能自动连接WIFI(华为不能自动连接车载蓝牙了)

  • 自动换行怎么设置(自动换行用哪个键)

    自动换行怎么设置(自动换行用哪个键)

  • 邮箱qq登录格式是什么(邮箱qq登录格式不对)

    邮箱qq登录格式是什么(邮箱qq登录格式不对)

  • 待机桌面停止运行怎么回事(待机桌面停止运行快捷键)

    待机桌面停止运行怎么回事(待机桌面停止运行快捷键)

  • 快手会自动取关别人吗(快手会自动取关吗)

    快手会自动取关别人吗(快手会自动取关吗)

  • 苹果手机v版啥意思(苹果是什么意思)

    苹果手机v版啥意思(苹果是什么意思)

  • ipad登录qq为什么闪退(ipad登录qq为什么一直显示平板在线)

    ipad登录qq为什么闪退(ipad登录qq为什么一直显示平板在线)

  • word文档怎么打上下标(word文档怎么打分数)

    word文档怎么打上下标(word文档怎么打分数)

  • 手机被拉黑了还能收到短信吗(手机被拉黑了还能定位吗)

    手机被拉黑了还能收到短信吗(手机被拉黑了还能定位吗)

  • ios13小圆点哪里开启(苹果ios13小圆点在哪里设置)

    ios13小圆点哪里开启(苹果ios13小圆点在哪里设置)

  • 微星显卡支持个人送保吗(微星显卡支持个人)

    微星显卡支持个人送保吗(微星显卡支持个人)

  • oppo手机的分辨率在哪里看(oppo手机的分辨率在哪儿)

    oppo手机的分辨率在哪里看(oppo手机的分辨率在哪儿)

  • 手机不息屏怎么回事(手机不熄灭屏幕)

    手机不息屏怎么回事(手机不熄灭屏幕)

  • 缴纳个人所得税还算应届毕业生吗
  • 小规模第一次申请发票能领多少
  • 闲置固定资产如何做账
  • 没有社保可以缴费吗
  • 非财政补助结余分配借贷方向
  • 资信证明好开吗
  • 可供分配利润包括所得税吗
  • 增值税过期未抵扣
  • 费用进项税额转出怎么做账务处理分录
  • 个人独资企业改为有限公司
  • 税友每年还要交年费?
  • 企业所得税季报填报说明
  • 代理销售怎么记账
  • 公司成立之后有人投资怎么做分录?
  • 开发商开发土地需要交国家什么钱
  • 无偿使用房屋
  • 酒店购买矿泉水再卖给客人怎么处理
  • win10外接音响没反应
  • 工程建设期间的借款利息
  • 进项税和销项税怎么抵扣
  • 关闭bios启动
  • navapp.exe - navapp是什么进程文件 作用是什么
  • 建筑单位没有资质可以承包项目吗
  • 收到租赁发票会计分录怎么做
  • php socket select
  • php的file函数
  • 企业迁址如何办理手续
  • 体积最小的u盘
  • phpstudy怎么配置php环境
  • composer环境变量
  • vue 浮动窗口
  • java pdf生成工具
  • 关于商业承兑汇票的多选题有哪些
  • 最详细的世界地图
  • php 遍历字符串
  • 固定资产到期日
  • 销售旧货和销售使用过的固定资产
  • 小微企业免征增值税报表填写
  • 公司注销税款太多
  • 使用增值税发票违法吗
  • 非盈利组织捐赠物资收入账务处理流程
  • 个体工商户经营所得税税率表2023年
  • 个税申报数据有误
  • sqlserver2005导出数据
  • 进口货物的完税价格计算公式
  • 成本结账是什么意思
  • 除了住房公积金还有什么基金
  • 应交税费会计核算
  • 现金日记账每月都要写期初余额吗
  • 工资代发户怎么开
  • 对方多开发票怎么处理?
  • 购买机器的运费计入什么科目
  • 没有进货发票可以开票吗?
  • 个税专项扣除住房租金标准
  • 进项税和销项税抵扣的会计分录
  • 有偿服务职工怎么办
  • linux文件系统损坏
  • 远程管理是什么意思
  • win8怎么格式化硬盘
  • win7多用户怎么删除
  • linux修改计算机主机名和用户名
  • 查看 linux版本
  • xp无法访问win7电脑
  • win7突然变卡顿怎么回事
  • linux中使用less命令分屏查看
  • js让按钮不能点击
  • perl判断字符串相等
  • javascript如何学
  • c调用nodejs
  • js实现功能
  • js移动dom
  • javascript 性能
  • jquery示例
  • android获取手机的基本信息
  • 海关编码查询 商品编码查询
  • 个人所得税发票
  • 珠宝加工费骗局
  • 移动办税12366
  • 如何查公司税务问题
  • 购买税控设备
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设