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

  • 咕咕网盘(咕咕网盘)(咕咕网盘手机版)

    咕咕网盘(咕咕网盘)(咕咕网盘手机版)

  • vivox50有3.5mm的耳机孔吗(vivox50自带耳机型号)

    vivox50有3.5mm的耳机孔吗(vivox50自带耳机型号)

  • vivo NEX 3s的屏幕有多大(vivonex3s的屏幕)

    vivo NEX 3s的屏幕有多大(vivonex3s的屏幕)

  • 快手隐私用户能上热门吗(快手隐私用户能看到动态吗)

    快手隐私用户能上热门吗(快手隐私用户能看到动态吗)

  • 抖音扫福在哪里(扫福在哪里找)

    抖音扫福在哪里(扫福在哪里找)

  • 微信视频怎么定格封面(微信视频怎么定时发送)

    微信视频怎么定格封面(微信视频怎么定时发送)

  • 华为手机下滑所有快捷开关不见了(华为手机下滑所有的关闭运动关了为什么还是可以打开)

    华为手机下滑所有快捷开关不见了(华为手机下滑所有的关闭运动关了为什么还是可以打开)

  • 歌曲怎么下载到u盘里面(歌曲怎么下载到手机文件夹)

    歌曲怎么下载到u盘里面(歌曲怎么下载到手机文件夹)

  • 苹果左上角中国联通不见了(苹果左上角中国移动怎么显示出来)

    苹果左上角中国联通不见了(苹果左上角中国移动怎么显示出来)

  • codemeter是什么软件(code1软件)

    codemeter是什么软件(code1软件)

  • 苹果11反应慢卡顿怎么办(苹果11反应慢卡顿怎么办没有声音)

    苹果11反应慢卡顿怎么办(苹果11反应慢卡顿怎么办没有声音)

  • 微信登录频繁怎么解决(微信登录频繁怎么登录回来呢)

    微信登录频繁怎么解决(微信登录频繁怎么登录回来呢)

  • 手机屏幕亮度调到最亮,怎么还暗,为什么(手机屏幕亮度调到多少合适)

    手机屏幕亮度调到最亮,怎么还暗,为什么(手机屏幕亮度调到多少合适)

  • 苹果官网有几个发货地(苹果官网有几个店)

    苹果官网有几个发货地(苹果官网有几个店)

  • ipad电容笔怎么用(ipad电容笔怎么写字)

    ipad电容笔怎么用(ipad电容笔怎么写字)

  • oppoa11x怎么设置来电闪光灯(oppoa11x怎么设置返回键)

    oppoa11x怎么设置来电闪光灯(oppoa11x怎么设置返回键)

  • 如何关闭小米音乐锁屏(如何关闭小米音箱)

    如何关闭小米音乐锁屏(如何关闭小米音箱)

  • 快手怎么切换视频(快手怎么切换视频看法)

    快手怎么切换视频(快手怎么切换视频看法)

  • Word文档中怎么输入上标下标(word文档中怎么加入分隔线)

    Word文档中怎么输入上标下标(word文档中怎么加入分隔线)

  • emc认证是什么认证(emc认证机构官网)

    emc认证是什么认证(emc认证机构官网)

  • 多多果园水滴福袋提醒怎么关闭(多多果园水滴福利退单了会怎么样)

    多多果园水滴福袋提醒怎么关闭(多多果园水滴福利退单了会怎么样)

  • 详解Java解析XML的四种方法(java解析xml常用方式)

    详解Java解析XML的四种方法(java解析xml常用方式)

  • iptraf-ng命令  交互式彩色IP LAN监视器(ip a命令详解)

    iptraf-ng命令 交互式彩色IP LAN监视器(ip a命令详解)

  • 税务师入会与不入会冲突
  • 纳税检查调整的滞纳金怎么收
  • 公司申报个税流程
  • 价税合计金额怎么算出税额
  • 投资性房地产在建
  • 专项应付款怎核算?
  • 火车票报销抵扣税率
  • 土建工程维修
  • 员工回家探亲的文案
  • 融资贷款购车
  • 小企业会计准则是小规模纳税人吗
  • 社保补贴有几年
  • 预付账款收不到发票汇算清缴调整增吗
  • 纳税申报表销售额可以是负数吗
  • 小微企业银行贷款印花税
  • 计提存货跌价准备计算公式
  • 职工死去还有工资吗
  • 企业有哪些o
  • 股东转让股份怎么转让
  • 固定资产提前报废需要补提折旧吗
  • 取得高新技术企业
  • 预借现金和现金分期的区别
  • window10 怎么避免弹窗广告
  • 有关预提费用如何冲销
  • 非正常损失的进项税额如何计算
  • 发票差额怎样做分录
  • win10 21h1正式版怎么样
  • win10待机屏幕图片设置
  • PHP:curl_multi_setopt()的用法_cURL函数
  • 逾期未收回包装物押金税率
  • ekb install
  • 移民美国怎样加入医疗保险
  • vue ref获取元素高度
  • php代码用什么工具
  • vue3安装配置
  • fasternet高效上采样模块
  • cp命令使用
  • php 微信公众号自定义菜单
  • 应收账款周转率下降说明什么
  • 营业外支出明细账
  • 核定征收的方式包括
  • 企业报废原材料如何处理
  • 官方的问答
  • mongodb介绍
  • 专项扣除三险一金是哪三险
  • 未开票收入如何记账
  • 企业所得税营业成本包括管理费用吗
  • 为什么生产成本不属于损益类科目
  • 查账征收个体户经营所得税怎么计算
  • 网上购物退货后钱多久到
  • 企业接受捐赠的固定资产,应增加营业外收入
  • 企业有外币账户怎样做账
  • php 访问数据库
  • winxp系统怎么连接网络
  • windows怎么将任务栏放大
  • win7系统设置开机启动项
  • win10怎么设置加快电脑速度
  • linux命令合集
  • CentOS yum php mcrypt 扩展安装方法
  • 在Linux系统中安装镜像步骤
  • microsoft ime进程
  • 雨林木风 winxp sp3 安装版 ys8.0
  • ie11打不开闪退解决办法win 7
  • windows10禁用独立显卡
  • css div布局的基本步骤
  • unity接sdk教程
  • jQuery 判断JSON
  • Unity3D游戏开发引擎
  • python如何获取
  • python中str的用法
  • 事件传播路径
  • jquery 列表控件
  • JavaScript Array对象详解
  • css调查问卷
  • 基于nodejs的框架
  • shell脚本 su
  • javascript面向对象精要pdf下载
  • 60后歌手有哪些
  • 河南运输客票查询管理条例
  • 签订设计合同
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设