Ruo-Yi-Plus前端图片无法显示问题

目录

一、发现问题

二、解决方案

1. 修改image-upload中方法

2. 修改image-preview中的方法

3.修改自己代码

三、总结

---

一、发现问题

在扩展Ruo-Yi-Plus框架时，添加图片数据成功后，在列表中无法显示图片数据

查找源码时发现使用了image-preview组件

从image-preview中并没发现对图片路径有过多的处理，查询数据库时发现保存的数据是一串数字，可能是时间戳或者id

这时就需要查询添加图片组件image-upload

发现在上传成功后调用了uploadedSuccessfully方法

打印fileList和uploadList方法时发现是一个数组对象，里面有url路径和其他数据（sys_oss表数据），也就是还保存着图片的路径

之后查找listToString方法发现拼接的是数组对象里的ossId

查看sys_oss表中发现文件路径保存在此表中

二、解决方案

知道了文件路径保存在sys_oss表中，则有以下解决方法

1. 修改image-upload中方法

此方法还没有发现弊端

修改listToString方法。将拼接的ossId换成url

2. 修改image-preview中的方法

此方法要改动太多不太推荐

弊端：在原本的系统管理中有文件管理模块也用到了此方法，他传过来的数据是url而不是ossId所以会导致文件管理查不到，这时候就需要进行其他逻辑处理。或者改views/system/oss/index.vue中的数据将原本传入的url换成ossId保持一致

（views/system/oss/index.vue中 传入的是url）

在image-preview组件中修改realSrc计算属性中的处理逻辑

3.修改自己代码

弊端：降低查询效率

在自己所添加的模块中查询数据时，将原本保存的image路径（现在是ossId）查询sys_oss数据表换成url路径。

同时后端需要查询两张表，会降低查询效率。

三、总结

用上述方法成功回显图片（目前没有试过回显多张图片）

综上所述，使用第一种方法较为便捷并不修改自己代码逻辑。修改image-upload组件中listToString方法。将拼接的ossId换成url。

如有发现其他问题，欢迎指正