使用Ueditor上传图片到图片服务器（一）

使用Ueditor上传图片到图片服务器（一）

2024-12-04 12:06

网站的文章，通过运营平台来发布文章（图文消息），上传图片等。百度Ueditor比较成熟就采用了该技术，另外上传的图片是网站系统以及运营平台系统共享的，所以考虑搭建独立的图片服务器，以后也可以提供给公司其他服务使用，当做单独的文件服务器。

关于Ueditor的接入，资料很多，我主要参考了：http://blog.csdn.net/Amayadream/article/details/47285209等博客，官网：http://fex.baidu.com/ueditor/。

（1）：添加pom依赖

并没有引入ueditor的jar包，而是在源码的基础上进行了二次开发，有需要的可以找我要（链接：https://pan.baidu.com/s/1kXb17gz 密码：joom）。所有ueditor的统一入口Controller接口：

具体看我提供的链接里的代码。

（2）将ueditor的静态代码js/css等放到项目里，需要配置的地方：

ueditor.config.json——配置各种图片、文件路径名称，远程上传的话需要配置以下：

ftp上传部分的代码，在我提供的包里，我提供的代码改一下相应的包名，可以直接使用。接下来的文章会讲解包里的部分代码。

imageUrlPrefix可以配置图片服务器的地址，如果是本地的话为空。Ueditor是自动将imageUrlPrefix+imagePathFormat作为完整的图片地址来使用的。

（3）配置：

设置window.UEDITOR_HOME_URL

设置后台请求URL，所有Ueditor的统一请求地址，请求到我上边提到的Controller的统一入口，不同的请求包括：imageUpload/config等等。该配置是ueditor.config.js：

引入js文件：

textarea部分：

至此，该编辑器可以正常使用，可以写文字，文章中嵌入图片。图片会上传至远程服务器，图片地址是ueditor自动拼接：imageUrlPrefix+imagePathFormat，我是把整篇文章的内容（getContent方法），包括样式，图片地址存入数据一个text字段。网站的前端可以直接拿来展示。

Ueditor没有提供单独上传图片的功能，但是编辑器中有上传图片的功能，可以基于此，稍稍加点内容就可以实现了：

JS代码以及HTML部分代码：

image.js中做如下修改，找截图部分位置，加一句：

至此，就可以单独使用上传图片的功能了。效果如下：

因为我对前端不太熟练，所以这篇文章写得不是很清晰。还请见谅。