如何使用ueditor上传照片

Posted 2023-03-29

参考技术A 在ueditor目录下找到uedior.config.js，找到如下三行：
,imageUrl: "<%=path %>/controller.json" //图片上传提交后台对应的地址，路径固定为*/controller.*
,imagePath: "<%=path %>/ueditor/" //图片在服务器上的存储目录
,imageFieldName: "upload" //后台对应接收image的参数名

或者：
var ueditor = UE.getEditor('myEditor',
imageUrl: "<%=path %>/servlet/UploadServlet", //图片上传提交后台对应的地址
imagePath: "<%=path %>/ueditor/", //图片在服务器上的存储目录
imageFieldName: "upload" //后台对应接收image的参数名
);

注意：记得在uedior.config.js配置文件中把"serverUrl"注释掉
在/ueditor/_src/plugins/simpleupload.js文件中，把link = me.options.imageUrlPrefix + json.url; 改为link = getRootPath()+json.url;
最后配置服务器返回的数据格式，这需要这服务器端进行修改。对应于后台接收上传图片的那个controller，返回的格式需如下：
'url':'60391393848223.jpg','title':'p1999637039.jpg','original':'p1999637039.jpg','state':'SUCCESS'

注意：url用相对路径，这样就OK了。

使用Ueditor上传图片到图片服务器

上一篇主要写了前端部分如何配置ueditor的上传路径，已经jsp页面中如何使用ueditor的编辑器功能以及如何配置单独的图片上传功能。

这一篇，我分两部分：第一部分是搭建图片服务器以及配置ftp上传功能；第二部分写一下ueditor的java部分主要功能代码，主要是ftp上传部分代码。（这些代码在我上一篇网站中的百度网盘地址中都有）

第一部分：搭建图片服务器以及配置ftp上传功能

主要参考：https://www.cnblogs.com/qq3111901846/p/6505943.html，讲的很详细，我完全是按照这篇文章一步一步配置的。

1、需要linux环境，下载nginx，ftp。

2、设置ftpuser，ftp的默任目录/home/ftpuser, 可以在nginx中将该目录作为图片服务器的默任位置。这样访问图片时：域名/a.jpg，这里的a.jpg就在/home/ftpuser中存的。

 

第二部分：ueditor的java部分主要功能代码

其实主要是这三个类，

（1）DefaultFileManager是本地上传的类。FtpFileManager是在DefaultFileManger基础之上改的上传到ftp的类。参考：https://www.cnblogs.com/AlexLiu1986/p/4699764.html。参考这篇博客的整体思路。

这是ftpFileManger的代码截图，和本地上传的区别就在于，先保存至本地，然后调用工具ftpclientutils传到ftp服务器后，再删除本地文件。

（2）FtpClientUtils是ftp的工具类。参考的时：http://blog.csdn.net/w410589502/article/details/52174123。参考这篇的FtpClientUtils类。其他没用。

 代码都比较简单，想要参考的朋友看我上一篇博客。有百度网盘的链接。这些都是我从开源的网站上学到的，所以理应觉得自己开发后，应该分享到社区里，给大家做个参考。

有问题，可以问我。我理解的也不是很透，但是一定知无不言言无不尽。