UEditor 编辑器实现文件上传到服务器及图片回显问题

  在上一节我们讲到了UEditor 编辑器的下载与安装问题，也实现了编辑器初始化问题。但是 UEditor 编辑器重要的文件上传功能却没有实现，那么本文针对此问题，提出一些解决方案。

目录

  默认后端未配置，上传的插件是不能加载的。

一、导入 json 支持包和文件上传支持包

 pom.xml中添加以下依赖：

	org.jsonjson20160810commons-fileuploadcommons-fileupload1.3.1
 

 导入依赖以后，上传的插件能正常加载，图片也能成正常上传，但是图片回显有问题。上传图片演示如下：

上传的图片他会默认存放在服务器的指定文件夹下，结果如图：
  

二、解决 UEditor 文件上传后无法回显问题

修改 jsp→lib文件夹下的 config.json 的配置：
  
  修改 config.json 中的 imageUrlPrefix 与 imagePathFormat 两个配置，分别修改为 “项目名称” 和 图片的指定上传文件夹。（这里演示的项目是 “demo_ueditor”，并且指定上传到服务器的 upload文件夹下），效果如下图：
  
注意：这时需要在 spring-mvc.xml 放行 upload 目录：
  
效果演示如下：

上传效果图如下：
  

整体效果如下图所示：

补充：IDEA中引入 UEditor 编辑器图片回显问题

  在 idea 中引入 UEditor 编辑器图片回显可能会失败，但是图片已经上传成功。此时通过 html 元素查看，即可查看到以下结果：

  解决方案：这是由于 idea 可以对服务器设置虚拟路径，服务器通过虚拟路径来访问图片，并加载图片。但是由于设置的虚拟路径和项目名称不同，因此会导致图片访问不到，此时可以修改服务器启动的虚拟路径设置与项目名称相同即可。

  针对以上问题，暂时没有找到更有效的解决方案，如果有更好的方法或者在操作时出现问题，欢迎在评论区留言哦~