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

  • 全国增值税专用发票计算机稽核网络系统工程
  • 土地 税
  • 幼儿园会计需要做什么工作
  • 顺流交易为什么调整被投资方
  • 预包装食品销售流程图
  • 收入与支出怎么算利润率
  • 差旅费报销单是外来原始凭证吗
  • 2021新版利润表
  • 旅游业全额开票可以差额征税吗
  • 房地产企业分立会计处理及税务筹划案例解析
  • 个人独资企业是什么单位性质
  • 物流企业会计核算的主要内容
  • 企业资产负债表图片
  • 事业单位存货盘盈
  • 违规费用处理
  • 行政事业单位国有资产处置收入包括
  • 长期股权投资的初始计量
  • 票开了但是没有发票
  • 创业带动的就业是什么
  • 跨年度主营业务收入错账调整
  • 什么收入不需要交税0税
  • 企业资产损失会计处理
  • 完成产值怎么算
  • b4纸张尺寸
  • 当月进项留抵如何做账
  • 研发费用加计扣除优惠明细表
  • php数组函数输出《咏雪》里有多少"片"字
  • 银行代扣的年费怎么退
  • mac如何恢复到出厂系统版本
  • xwizard.exe是什么
  • 补交上年度增值税附加税,怎么做账
  • 支付税控服务费的账务处理
  • 汇总纳税企业总分机构信息备案
  • php实现留言板功能
  • php获取网页所有页数
  • 网络工程师笔记大全
  • ssd训练自己的数据集pytorch
  • 经营租赁出租方的会计处理
  • vue加载时如何避免出现代码
  • 主营业务成本和生产成本的关系
  • 织梦如何添加浮动广告
  • 红字信息表重复开具怎么处理
  • 红字发票是可以抵扣吗
  • mysql查询某个字段重复数据
  • 招聘招一个人爱我图片
  • 小微企业免税销售额和其他免税销售额的区别
  • 小规模纳税人购进税控收款机
  • 事业单位结余是什么意思
  • 处理报废的固定资产账务处理
  • 网上报税流程演示2019
  • 应付票据的概述
  • 发票怎么领用具体流程
  • 小额零星支出是什么意思
  • 企业收付实现制还是权责发生制
  • 企业项目贷款所需资料
  • mysql常见语句总结
  • mysql数据库数据迁移
  • windows下mysql 5.7版本中修改编码为utf-8的方法步骤
  • centos 6.5下 mysql-community-server. 5.7.18-1.el6安装
  • 电脑安装win8系统
  • macos 右键菜单
  • win10登陆界面怎么关闭
  • linux diff用法
  • centos8设置默认启动命令界面
  • win10开机自动启动软件怎么设置
  • win7关闭右下角操作中心
  • Win10 Mobile 10586.164中文版升级截图曝光
  • linux使用命令查看ip地址
  • css spirit
  • opengl 3d engine
  • 用nodejs做的项目
  • android jdk下载
  • 批处理传输文件夹到ftp
  • javascript闭包函数
  • nodejs递归创建目录
  • java 使用jar包
  • 销售哪些产品需办许可证
  • 上海市浦东新区人民医院
  • 河南省税务局领导班子名单
  • 小规模纳税人租赁收入增值税税率是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设