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

  • 微信收付款二维码怎么设置密码(微信收付款二维码截图可以用吗)

    微信收付款二维码怎么设置密码(微信收付款二维码截图可以用吗)

  • 魅族 18 Pro支持内存容量扩展吗(魅族18pro支持红外遥控吗)

    魅族 18 Pro支持内存容量扩展吗(魅族18pro支持红外遥控吗)

  • 微信如何设置面部登录(微信如何设置面容解锁)

    微信如何设置面部登录(微信如何设置面容解锁)

  • 微信付费表情怎么购买(微信付费表情怎么赠送)

    微信付费表情怎么购买(微信付费表情怎么赠送)

  • 点亮soulmat什么意思(点亮soulmate规则)

    点亮soulmat什么意思(点亮soulmate规则)

  • qq里面的扩列不见了(qq扩列为什么扩列不了)

    qq里面的扩列不见了(qq扩列为什么扩列不了)

  • 淘宝足迹别人能看到吗(淘宝有别人的足迹)

    淘宝足迹别人能看到吗(淘宝有别人的足迹)

  • vivox50有耳机孔吗(vivox50手机有耳机孔吗)

    vivox50有耳机孔吗(vivox50手机有耳机孔吗)

  • 西门子和三菱plc区别(西门子和三菱plc编程软件区别)

    西门子和三菱plc区别(西门子和三菱plc编程软件区别)

  • 32g傲腾512固态硬盘什么意思(32gb傲腾增强型ssd固态硬盘)

    32g傲腾512固态硬盘什么意思(32gb傲腾增强型ssd固态硬盘)

  • 学习通怎么下载(智学网怎么下载)

    学习通怎么下载(智学网怎么下载)

  • iwatch5可以独立打电话吗(apple watch series 5可以独立播放音乐吗)

    iwatch5可以独立打电话吗(apple watch series 5可以独立播放音乐吗)

  • 闪存盘是u盘吗(闪存盘啥意思)

    闪存盘是u盘吗(闪存盘啥意思)

  • nova3和3e手机壳通用吗(nova3e手机壳和哪个型号一样)

    nova3和3e手机壳通用吗(nova3e手机壳和哪个型号一样)

  • i3 6100性能相当于(i3 6100t性能)

    i3 6100性能相当于(i3 6100t性能)

  • 手机拍照hdr是什么功能(手机拍照HDR是什么模式)

    手机拍照hdr是什么功能(手机拍照HDR是什么模式)

  • qq接收的图片在哪个文件夹(qq接收的图片在哪里找)

    qq接收的图片在哪个文件夹(qq接收的图片在哪里找)

  • 手机插耳机没声怎么办(手机插耳机没声音了如何设置)

    手机插耳机没声怎么办(手机插耳机没声音了如何设置)

  • 拼多多关联店铺代码(拼多多关联店铺资金限制了)

    拼多多关联店铺代码(拼多多关联店铺资金限制了)

  • cad图纸比例怎么设置(cad图纸比例怎么确定)

    cad图纸比例怎么设置(cad图纸比例怎么确定)

  • word为什么编辑不了(word为什么编辑不了公式)

    word为什么编辑不了(word为什么编辑不了公式)

  • 带pe功能的u盘是什么(u盘带pe是什么意思啊)

    带pe功能的u盘是什么(u盘带pe是什么意思啊)

  • 手机桌面天气怎么恢复(手机桌面天气怎样添加城市)

    手机桌面天气怎么恢复(手机桌面天气怎样添加城市)

  • 阿里众包如何取消授权(阿里众包怎么退出)

    阿里众包如何取消授权(阿里众包怎么退出)

  • 电脑下载的文件解压教程(电脑下载的文件打不开怎么回事)

    电脑下载的文件解压教程(电脑下载的文件打不开怎么回事)

  • 用vue3+vant4开发的简单小众电商购物项目模板(纯前端)(vant移动端开发)

    用vue3+vant4开发的简单小众电商购物项目模板(纯前端)(vant移动端开发)

  • 一般纳税人开出的普票算销项税额吗
  • 金税盘入账的会计分录
  • 提供维修业务的税率
  • 分公司亏损总公司怎么办
  • 期间损益结转错误怎么冲销
  • 开专票需要交城建税吗
  • 行政事业单位会计制度
  • 民营企业的待遇
  • 购买增值税专用发票罪
  • 存货不同入账基数怎么算
  • 收入工程款后什么时候计提印花税
  • 按利润总额的25%计算应交所得税
  • 母子公司无偿划拨资产
  • 政府制定优惠政策
  • 公司茶水间备的零食该计入什么会计科目核算?
  • 小规模纳税人从哪里可以看出来
  • 付现金可以开专用发票吗
  • 地产商自持是什么意思
  • 年度中期是几月份
  • 应计提的存货跌价准备
  • 已认证发票退货怎么办
  • 专利代理服务费入账
  • 鼠标灯亮但是鼠标失灵
  • win11安卓子系统在哪打开
  • Thinkphp5+PHPExcel实现批量上传表格数据功能
  • 不动产分期抵扣政策
  • 银行电子承兑到期了怎么兑现操作
  • 税控机抵减增值税税额
  • 简单谈谈中国法律史的感受
  • php控制器是用来做什么的
  • vue无线滚动
  • 理财收益如何计税
  • php guzzle 异步
  • linux命令bzip2
  • php zmq
  • php getcwd与dirname(__FILE__)区别详解
  • 工程竣工决算会计账务处理
  • 小规模纳税人按简易计税法计税时也可以进行税额的抵扣
  • ios14.5ipad
  • 跨年专票红冲步骤
  • 错误凭证如何修改?所有的错误的凭证都能修改吗?
  • 销售商品尚未发出会计分录
  • 预付账款主要核算哪些内容
  • 小规模简易征收最新政策2020
  • 工业企业缴纳增值税吗
  • 银行卡频繁小额转账
  • 应收账款的贷方发生额表示什么
  • 工程施工企业收入1750万,利润怎么算
  • 如何查询工商局每天入驻情况
  • 企业会计凭证怎么写
  • 小规模纳税人购进税控收款机
  • 境外企业向境内汇款
  • 把办公场所转租合法吗
  • 摊销费用如何做账
  • 基本生产成本和生产成本
  • 出口免税项目
  • 银行利息收入的会计分录怎么写
  • mysql5.7.29安装
  • mysql中字符串函数
  • mysql 5.7.30安装
  • centos7配置tomcat
  • iptables配置文件详解
  • 文本文件模式
  • boot process
  • windows8怎么设置
  • mac连电视
  • win10系统百度网盘链接
  • 记住密码自动登录 会更新登陆信息吗
  • Time、Set、Smartdrv命令的使用方法
  • cocos2d-x教程
  • opengl光照算法
  • 巨幕prime
  • js中颜色对应代码
  • nodejs 模块
  • unity接入安卓sdk
  • jquery的children方法
  • javascript面向对象编程
  • 叉车需要手续吗
  • 公对私转账怎么开票
  • 江苏省发展改革委
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设