ueditor编辑器上传图片的显示问题

最近需要做一个标记文章的系统,在网上找到了Ueditor编辑器的代码,修修改改,添加jar包之后已经能运行成功,显示编辑页面。
在这里插入图片描述

开始分析问题:

最后发现图片上传出现问题,就是用户上传图片之后,编辑框里面没有显示图片
但是需求是用户上传之后,可以立即看到自己的图片,于是分析问题:
一、路径问题
1、这个图片在上传的路径不对,导致没有办法再次获取
2、这个图片在再次查找的时候路径不对,虽然已经存在,但是获取失败

二、这个功能没有进行保存图片,需要使用者再次更改
在这里插入图片描述
Google浏览器有一个很强大的功能就是可以直接查看源码,找到问题的错误
我查看源码的时候,发现图片的路径是存在的,猜想二错误,
错误直接定位到这行代码和图片的404丢失问题,验证猜想一正确。
在这里插入图片描述
现在要解决的问题就是判断这个问题出现在保存图片还是图片的再次获取。

开始进行诊断:

打开ueditor.config.js,可以看到服务器统一接口路径。
在这里插入图片描述

controller.jsp 作为服务端代码接收上传的文件 存入 本机或者服务器。所以肯定图片问题不会直接性的出现在这个文件里面。

我们这里增加一行代码

System.out.print(rootPath);

输出controller.jsp 接收到图片后存放的路径,在Console里面可以直接看到

D:\eclipseWork.metadata.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\XieMengCode
在这里插入图片描述
然后在页面提示路径错误的那个路径里面找到了我之前上传的图片,发现图片的名字已经没修改了,貌似有什么规律,看了看找不到规律,也就再没看,反正已经将假设一排除。

现在只有一种可能就是,图片在再次获取的时候出现错误了。
在这里插入图片描述
最后发现,这个路径 是 可以设置的。

设置的地方在 ueditor文件夹中 config.json里
在这里插入图片描述
大家看imagePathFormat,这个属性就是保存图片的路径,里面有时间的文件夹还有时间最后是生成的6位数,这个就是之前图片的名称的规律了。

imageUrlPrefix配置的是 图片访问路径的前缀。

有时候 我们上传图片成功了,但是 回调时显示不出来,就是因为 图片的地址不对。

比如 图片 是放在 项目中的,则访问图片 是需要带 项目名作为前缀的。
看config.json文件里面的imageUrlPrefix是没有项目名的,再看看第二个小细节,就是在这里插入图片描述
这个img的src的路径是没有项目名的,所以在本地路径下面值访问不到的。
现在在我的项目 设置 / 访问 项目,所以设置 “imageUrlPrefix”: “/项目名”。
我的就是:

"imageUrlPrefix": "/XieMengCode", /* 图片访问路径前缀 */

然后再次进行上传测试,发现成功
在这里插入图片描述
再次查看Google的源代码进行检查,发现也没有什么错误,这个时候img的src路径已经存在项目名
在这里插入图片描述
图片成功上传!
----------------------------------end---------------------------------------------

  • 11
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
UEditor编辑器存在一个高危漏洞,即在抓取远程数据源时未对文件后缀名做验证,导致任意文件写入漏洞。黑客可以利用这个漏洞,在服务器上执行任意指令。这个漏洞只影响.NET版本的UEditor,其他版本暂时不受影响。 为了利用这个漏洞,黑客可以在UEditor编辑器中的shell地址处填写服务器上的图片马地址,构造成特定格式。例如,在URL中将图片马地址后缀更改为.aspx,绕过上传使其解析为aspx文件,从而达到任意文件上传的目的。 为了防止这个漏洞被利用,建议开发者及时更新UEditor编辑器的最新版本,并确保在抓取远程数据源时对文件后缀名进行验证。此外,也可以限制用户上传的文件类型和大小,加强服务器的安全配置,以减少潜在的风险。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Ueditor编辑器任意文件上传漏洞](https://blog.csdn.net/m0_51468027/article/details/126077427)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Django集成百度富文本编辑器uEditor攻略](https://download.csdn.net/download/weixin_38613154/14865210)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值