ueditor 前后端分离+图片上传

从一开始的学习Vue开始，到引用ueditor 图片上传产生了各种问题，在网上也到处搜索了解决办法，并结合自己的工程，整理在此记录以备后续学习；

1、前端：vue
2、后端：springBoot+gradle+ groovy
3、ueditor-1.12.jar 源码修改

1、前端：vue
vue 的项目构建具体就不详细介绍了，FengCms FungLeo 博客写的很详细， http://blog.csdn.net/fungleo/article/details/77575077
修改点：
（1）在ueditor.config.js 中添加 window.UEDITOR_HOME_URL 和
serverUrl

  window.UEDITOR_HOME_URL ="static/ue/";var serverUrl="http://127.0.0.1:8011/inner/test/upload";并修改,serverUrl:serverUrl

如下图所示

（2）ueditor.all.js 修改；ueditor 单文件上传使用的iframe 不支持跨域；改为ajax上传

在 simpleupload 处引用jquery

utils.loadFile(document,{src:me.options.UEDITOR_HOME_URL+"third-party/jquery-1.10.2.min.js",tag:"script",type:"text/javascript",defer:"defer"});
替换  domUtils.on(input, 'change', function(){})中内容如下：domUtils.on(input, 'change', function() {if(!input.value) return;var loadingId = 'loading_' + (+new Date()).toString(36);var imageActionUrl = me.getActionUrl(me.getOpt('imageActionName'));var allowFiles = me.getOpt('imageAllowFiles');me.focus();me.execCommand('inserthtml', '<img class="loadingclass" id="' + loadingId + '" src="' + me.options.themePath + me.options.theme +'/images/spacer.gif" title="' + (me.getLang('simpleupload.loading') || '') + '" >');/!* 判断后端配置是否没有加载成功 *!/if (!me.getOpt('imageActionName')) {errorHandler(me.getLang('autoupload.errorLoadConfig'));return;}// 判断文件格式是否错误var filename = input.value,fileext = filename ? filename.substr(filename.lastIndexOf('.')):'';if (!fileext || (allowFiles && (allowFiles.join('') + '.').indexOf(fileext.toLowerCase() + '.') == -1)) {showErrorLoader(me.getLang('simpleupload.exceedTypeError'));return;}var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';var action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);var formData = new FormData();formData.append("upfile", form[0].files[0] );$.ajax({url: action,type: 'POST',cache: false,data: formData,dataType:'json',processData: false,contentType: false,success: function (data) {console.log("data:",data)// data = JSON.parse(data);var link, loader,body = (iframe.contentDocument || iframe.contentWindow.document).body,result = body.innerText || body.textContent || '';link = data.url;if(data.state == 'SUCCESS' && data.url) {loader = me.document.getElementById(loadingId);loader.setAttribute('src', link);loader.setAttribute('_src', link);loader.setAttribute('title', data.title || '');loader.setAttribute('alt', data.original || '');loader.removeAttribute('id');domUtils.removeClasses(loader, 'loadingclass');} else {showErrorLoader && showErrorLoader(data.state);}form.reset();}});function showErrorLoader(title){if(loadingId) {var loader = me.document.getElementById(loadingId);loader && domUtils.remove(loader);me.fireEvent('showmessage', {'id': loadingId,'content': title,'type': 'error','timeout': 4000});}}});

2、后端：springBoot+gradle+ groovy
（1）引入ueditor 包
compile(‘com.sytest:ueditor:1.1.0’)

（2）过滤跨域问题
response.setHeader(“Access-Control-Allow-Methods”, “POST, PUT, GET, OPTIONS, DELETE”)
response.setHeader(“Access-Control-Allow-Headers”, “x-requested-with,X_Requested_With,Authorization,Origin, Accept, Content-Type”)
（3）文件上传 controller

@CompileStatic
@TypeChecked
@RestController
@RequestMapping(value = "/inner/test")
class TestApi {/*** 获取 config 配置文件* @param request* @param response* @return*/@GetMapping( "upload" )String upload(HttpServletRequest request, HttpServletResponse response){response.setHeader("Content-Type" , "application/javascript")try {String exec = new ActionEnter(request, "","").exec()println "返回值："+execPrintWriter writer = response.getWriter()writer.write(exec)writer.flush()writer.close()} catch (Exception  e) {e.printStackTrace()}}/*** 文件上传* @param request* @param response* @return*/@PostMapping(value =  "upload" )String postMapping(HttpServletRequest request){String  rootPath ="D:\\test\\"String  accessPath ="http://127.0.0.1:3000"String exec = new ActionEnter(request, rootPath,accessPath).exec()println "Post返回值："+execreturn  exec}
}

（4）将uedito-php 解压后的 confg.json 放到 resources 目录下

3、ueditor-1.12.jar 源码修改，修改源码：https://gitee.com/yszd2017/ueditor-yszd.git

BinaryUploader 中修改如下：

 MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;MultipartFile multipartFile = multipartRequest.getFile(conf.get("fieldName").toString());if (multipartFile == null) {return new BaseState(false, AppInfo.ERROR_7_NOTFOUND_UPLOAD_DATA)}
//
//            ServletFileUpload upload = new ServletFileUpload()
//            if (isAjaxUpload) {
//                upload.setHeaderEncoding("UTF-8")
//            }

ConfigManager 获取配置文件修改

  private void initEnv() throws FileNotFoundException, IOException {File file = new File(this.originalPath)if (!file.isAbsolute()) {file = new File(file.getAbsolutePath())}this.parentPath = file.getParent()
//        String configContent = this.readFile(this.getConfigPath())String configContent = this.filter(IOUtils.toString(this.getClass().getClassLoader().getResourceAsStream("config.json")))try {JSONObject jsonConfig = new JSONObject(configContent)this.jsonConfig = jsonConfig} catch (Exception var4) {this.jsonConfig = null}}

ueditor 前后端分离+图片上传相关推荐

Tornado+Layui（九）Tornado+Layui 前后端分离头像上传
目的:添加人员信息和头像同时上传过程: 1.Layui头像界面 <!DOCTYPE html> <html> <head><meta charset=&qu ...
前后端上传图片（上传发票并获取发票信息）
前后端上传图片(上传发票并获取发票信息) React+Antd上传图片后端SpringBoot接收图片 SpringBoot后端解析发票信息 React+Antd上传图片上传图片upload组件 ...
UEditor之基于Java图片上传前后端源码研究
那么开始吧! 这是我的项目目录 1.从访问路径http://localhost:8081/Test/_examples/simpleDemo.html,我们主要是要看看,富文本框被加载出来之前,会调用 ...
使用ueditor实现单独的图片上传功能
从网上找到的一种方法,代码如下: /** 配置:* 1. 修改ueditor.config.js 中的路径* 2. 添加ueditor.jar 和commons-fileupload-1.2.2.ja ...
springboot+html+ueditor 前后端分离使用方法
1. 去官网下载 ueditor 比较简单就省略了. 2. html 页面引入 js 也省略了. 3.重点 serverUrl: URL + "jsp/controller.jsp&qu ...
从web编辑器 UEditor 中单独提取图片上传，包含多图片单图片上传以及在线涂鸦功能...
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
关于editor网页编辑器ueditor.config.js 配置图片上传
最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...
Vue项目中最简单的使用集成百度UEditor方式，含图片上传
前言封面是UEditor的百度指数折线图.虽然今天已经是 2018 年,且优秀的富文本编辑器层出不穷(包括移动端),但从图中可以看出UEditor仍然维持着较高的搜索热度.而不少公司和个人也仍然 ...
Vue项目中最简单的使用集成UEditor方式，含图片上传
Vue 3 项目参考这里前言封面是UEditor的百度指数折线图.虽然今天已经是 2018 年,且优秀的富文本编辑器层出不穷(包括移动端),但从图中可以看出UEditor仍然维持着较高的搜索热 ...
ueditor编辑器复制粘贴图片上传
由于工作需要必须将word文档内容粘贴到编辑器中使用但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...

ueditor 前后端分离+图片上传

ueditor 前后端分离+图片上传相关推荐

最新文章

热门文章