必威体育Betway必威体育官网
当前位置:首页 > IT技术

百度富文本Ueditor图片上传趟坑之路

时间:2019-09-29 09:15:34来源:IT技术作者:seo实验室小编阅读:69次「手机版」
 

ueditor

之所以写这片文章是自己在使用Ueditor当中,自己遇到的一些问题整理一下

1. 项目说明:使用Ueditor的项目是一个后台管理的项目,采用maven搭建的ssh框架另外添加了redis等组件,当中使用了struts2,对于struts2自身了解不深,所以导致踩坑有点多。

2. 问题一:使用Ueditor的时候出现后台配置未正常加载的情况。

这种情况通常是jar包未正常加载的原因。解决办法很简单,将jar包添加到项目当中。可能大家用的开发工具不一样,那么添加的方式也不一样,包括是否使用maven也影响添加jar包。具体怎么添加大家就自行百度一下,在这里主要说明如果是maven项目那么你要确认一下项目当中是否有下图前3个,如果有那么就不要再次添加了,一般情况只添加json.jar和ueditor.jar即可,然后运行项目便可以发现可以上传图片了

这里写图片描述

3. 问题二:后台配置正确后发现上传图片未找到上传数据

产生这个的原因通常是被拦截器拦截了,当然大家可能都知道被拦截器拦截了。而且也有很多博客写到,自己自定义拦截器就好了。对这是一种方法,但是大家在开发过程中通常用的是公司框架。那我们便不能自定义拦截器,只需要去修改配置文件即可。这个项目是maven构建的ssh框架,未找到上传数据的原因是被struts拦截了数据。我们找到struts的配置文件,我这个项目是在resources下的struts.xml。打开这个xml文件,在xml文件当中找不设置拦截的模块,当然有可能没有注释说明那就有点尴尬只能慢慢看,或者去询问一下搭建框架的人。通常项目当中都设置了一些不需要拦截的东西,耐心看看就好了。

如下图,这是我们的拦截器配置,在其后面追加/resources/ueditor/.*意思就是讲不拦截ueditor下的内容

这里写图片描述

经过一上的设置一般情况下应该是可以正常上传,并显示了,如果你们的程序员又对ueditor进行了封装,或者做了别的处理那就另讲了。

这里我做的这个出现了一个神奇的问题,说自己经验不足把没有找到根本原因,但是通过了别的方法解决了这个问题,大家就看看就好。

4. 问题三:经过上面步骤图片能上传了,但是突然发现无法加载出来,现象如下

这里写图片描述

然后立马按了F12,查看路径

http://localhost:8080/upload/ueditor/image/20180703/1530581900671060588.png

好像有点问题,查看自己配置文件如下图:

这里写图片描述

what?什么鬼,怎么会突然多了一个upload这个路径,果断在网页中先去掉upload,发现能够正常显示。

这里写图片描述

这upload哪里来的,不知道,全局检索吧,检索了依旧没找到,既然不能从源头解决那就从过程解决了。

图片上传有两个,一个是单图,一个是多图。我们百度一下Ueditor的源码讲解,稍微了解一下怎么显示的,我对往前台加载图片的时候动了刀子,既然找不到源头,那我就替换掉一个好了。

首先我们找到ueditor.all.js,上传图片完毕之后就是通过这个js文件进行加载的图片,

对于单图来讲在代码的22219行

这里写图片描述

我们可以看到有一个callback方法用来加载数据,json就是上传之后返回来的数据。

link则代表你的url,在link放入loader之前,我把”/upload”替换成了空,用的是replace而不是replaceAll,之所以用第一个是考虑认为把上传路径加上“/upload”,用第二个会替换掉全部。然后我们上传单图发现,咦显示了,但是明显高兴的太早。

点击多图上传之后依旧没有显示图片,然后再找代码,在代码的9996行,

这里写图片描述

这是默认加载图片处理方式,同样的操作我们将其中src替换一下,然后在点击上传发现多图也正常显示了。

注意注意:如果说大家也碰到这种问题,我个人建议源头上解决这种问题,但是实际我没有找到为什么会多,因此我采用了这用方式,但是这样也可能会造成别的影响,实在找不到再采用这种问题,这个问题我百度好久也没有找到为什么,所以投机取巧了。另外把我的项目配置贴一下图,如果有了解的大佬请告诉我这个小菜鸟为什么会多一个”/upload”!!!万分感谢!!!

ueditor配置如下:

config.json

这里写图片描述

ueditor.config.js

这里写图片描述

controller.jsp

这里写图片描述

相关阅读

IDEA集成git,上传代码到码云

码云(gitee.com)是开源中国推出的代码托管平台,github作为全球最大的同性交友平台,当然是首选了,但是如果你英文不是特别好,可以使用

网站图片需要付费禁止下载?这个网站神器轻松搞定!

有时候我们需要下载一个有版权或者无版权的图片作为个人使用,但是有些网站是无法直接下载图片的,需要付费购买才行,今天给大家共享一

两个190宽黑色简单动态闪图的淘宝收藏店铺图片素材

素材风格:简约黑色 适用店铺:淘宝店铺通用 图片大小:190px*138px,190*219 素材介绍:装修宅推荐水彩手绘粉色蛋糕图案收藏淘宝店铺

可牛影像图片怎么制作成水墨山水画?

可牛影像想要制作水墨山水画效果,该怎么制作这个效果呢?主要利用各种修复效果,该怎么制作呢?下面我们就来看看详细的教程。1、首先启

如何进行百度图片推广?

很多人都希望利用百度图片搜索来做推广,但这是如何实现的呢?今天,小小课堂网为大家带来的是《如何进行百度图片推广》。希望本次的

分享到:

栏目导航

推荐阅读

热门阅读