关于Java使用ueditor上传图片的一些总结

1.如何配置ueditor让上传的图片到项目之外？

因为图片上传到web项目中,重新部署项目可能会丢失图片。

解决方法：下载ueditor.1.1.2.jar.

地址：ueditor-1.1.2项目源码及jar包.zip
链接: https://pan.baidu.com/s/1Bhumfw8OX16n0MTO9ur73g 提取码: 5mmw

在config.json中最上面加入上传的物理地址：

"localSavePathPrefix":"/home/back_www",

2.ueditor没有单图片上传按钮，点击图片上传的按钮没有反应，js报错：“请求后台配置项http错误,上传功能将不能正常使用!”。

这是因为前台ueditor.config.js中配置的serverUrl错误了。应该是你访问jsp/controller.jsp那个服务器地址。

3.在ueditor编辑器中上传的图片没有回显到编辑器中

正确配置config.json中的 "imageUrlPrefix":"http://ck.xxxx.com:9999",

4.上传到服务器中的图片nginx没有权限访问，需要授权777进行访问？

这是因为nginx配置文件中，user配置错误了，之前配置的是user nginx;

更改为user root;

5.nginx如何配置访问上传到项目之外的图片？

location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|woff|woff2|svg|ttf)$ {root   /home/back_www;index  index.html index.htm;}

当访问到以上面格式的文件名结尾的路径时，比如：http://www.aaa.com/static/app/1.0.0/img/nav/user.png,默认将从/home/back_www/static/app/1.0.0/img/nav/user.png下面寻找。

6.复制粘贴微信公众号中的文章，图片不能显示，也不能保存？

1.ueditor.config.js中打开注释

//设置远程图片是否抓取到本地保存

,catchRemoteImageEnable: true //设置是否抓取远程图片

2.ueditor.all.js添加代码

/*** 远程图片抓取,当开启本插件时所有不符合本地域名的图片都将被抓取成为本地服务器上的图片*/
UE.plugins['catchremoteimage'] = function () {var me = this,ajax = UE.ajax;/* 设置默认值 */if (me.options.catchRemoteImageEnable === false) return;me.setOpt({catchRemoteImageEnable: false});me.addListener("afterpaste", function () {me.fireEvent("catchRemoteImage");});me.addListener("catchRemoteImage", function () {console.log("开始抓取" );var catcherLocalDomain = me.getOpt('catcherLocalDomain'),catcherActionUrl = me.getActionUrl(me.getOpt('catcherActionName')),catcherUrlPrefix = me.getOpt('catcherUrlPrefix'),catcherFieldName = me.getOpt('catcherFieldName');var remoteImages = [],imgs = domUtils.getElementsByTagName(me.document, "img"),backgroundimagestags = domUtils.getElementsByTagName(me.document, "section span div p "),//抓取背景图片所在的标签test = function (src, urls) {if (src.indexOf(location.host) != -1 || /(^\.)|(^\/)/.test(src)) {return true;}if (urls) {for (var j = 0, url; url = urls[j++];) {if (src.indexOf(url) !== -1) {return true;}}}return false;};//img标签for (var i = 0, ci; ci = imgs[i++];) {if (ci.getAttribute("word_img")) {continue;}var src = ci.getAttribute("_src") || ci.src || "";if (/^(https?|ftp):/i.test(src) && !test(src, catcherLocalDomain)) {remoteImages.push(src);}}//背景图片所在标签var backgroundimages = [];// console.log("背景图片个数：" + backgroundimagestags.length);for (var i = 0, backci; backci = backgroundimagestags[i++];) {var bstyle = backci.style;var backgroundimgurltag = bstyle['background-image'] || bstyle['background'] || "";if (backgroundimgurltag != null && backgroundimgurltag != "") {var backsrc = backgroundimgurltag.split("(")[1].split(")")[0].replace(/\"/g, "")|| backgroundimgurltag.split("(")[1].split(")")[0].replace(/\"/g, "")|| "";// console.log("ci_src：" + backsrc);if (backsrc != null && backsrc != "") {if (/^(https?|ftp):/i.test(backsrc) && !test(backsrc, catcherLocalDomain)) {backgroundimages.push(backsrc);remoteImages.push(backsrc);}}}// console.log("remoteImages个数：" + remoteImages.length);}if (remoteImages.length) {me.fireEvent('catchremotestart');catchremoteimage(remoteImages, {//成功抓取success: function (r) {try {var info = r.state !== undefined ? r:eval("(" + r.responseText + ")");} catch (e) {return;}/* 获取源路径和新路径 */var i, j, ci, cj, oldSrc, newSrc, list = info.list;//img标签的替换for (i = 0; ci = imgs[i++];) {oldSrc = ci.getAttribute("_src") || ci.src || "";for (j = 0; cj = list[j++];) {if (oldSrc == cj.source && cj.state == "SUCCESS") {  //抓取失败时不做替换处理newSrc = catcherUrlPrefix + cj.url;domUtils.setAttributes(ci, {"src": newSrc,"_src": newSrc});break;}}}//背景图片地址的替换var bodyHtml = me.document.body.innerHTML;console.log("上传之前html：" + bodyHtml);for (var a = 0; a < backgroundimages.length; a++) {oldSrc = backgroundimages[a] || "";for (j = 0; cj = list[j++];) {if (oldSrc == cj.source && cj.state == "SUCCESS") {  //抓取失败时不做替换处理newSrc = catcherUrlPrefix + cj.url;console.log("上传之后oldSrc：" + oldSrc);console.log("上传之后newSrc：" + newSrc);// console.log("上传之后html：" + me.document.body.innerHTML.replace(oldSrc, newSrc));//判断旧地址中,是不是有双引号,有的话,替换成单引号if(bodyHtml.indexOf('&quot;'+oldSrc +'&quot;') ){console.log(45674567890);bodyHtml = bodyHtml.replace('&quot;'+oldSrc +'&quot;', '&#39;'+newSrc +'&#39;');}else{console.log("不用替换");bodyHtml = bodyHtml.replace(oldSrc, newSrc);}console.log("替换之后html：" + bodyHtml);break;}}}me.document.body.innerHTML = bodyHtml;me.fireEvent('catchremotesuccess');me.fireEvent('catchremotecomplete');},//回调失败，本次请求超时error: function () {me.fireEvent("catchremoteerror");}});}function catchremoteimage(imgs, callbacks) {console.log("1111L：" + imgs.length);var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '',url = utils.formatUrl(catcherActionUrl + (catcherActionUrl.indexOf('?') == -1 ? '?':'&') + params),isJsonp = utils.isCrossDomainUrl(url),opt = {'method': 'POST','dataType': isJsonp ? 'jsonp':'','timeout': 60000, //单位：毫秒，回调请求超时设置。目标用户如果网速不是很快的话此处建议设置一个较大的数值'onsuccess': callbacks["success"],'onerror': callbacks["error"]};opt[catcherFieldName] = imgs;ajax.request(url, opt);}});
};

3.config.json中加入微信公众号图片地址白名单"mmbiz.qpic.cn"

"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com","mmbiz.qpic.cn"],

参考文章：https://blog.csdn.net/snow_love_xia/article/details/140012580

7.部署到服务器之后，会员头像不显示？

检查配置文件中，fs.root文件保存路径是否正确。

8.ueditor上传文章后，默认将第一张图片作为文章列表的封面

public static String getFirstImgStr(String htmlStr, String defaultStr) {String img = "";Pattern p_image;Matcher m_image;// String regEx_img = "<img.*src=(.*?)[^>]*?>"; //图片链接地址String regEx_img = "<img.*src\\s*=\\s*(.*?)[^>]*?>";p_image = Pattern.compile(regEx_img, Pattern.CASE_INSENSITIVE);m_image = p_image.matcher(htmlStr);while (m_image.find()) {// 得到<img />数据 不懂的qq1023732997img = m_image.group();// 匹配<img>中的src数据Matcher m = Pattern.compile("src\\s*=\\s*\"?(.*?)(\"|>|\\s+)").matcher(img);while (m.find()) {return m.group(1);}}return defaultStr;}

9.ueditor上传图片在线管理不显示