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

超、凢脫俗 2023-10-11 15:28 40阅读 0赞

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

--------------------

#### 目录 ####

*   *   *  一、导入 json 支持包和文件上传支持包
         *  二、解决 UEditor 文件上传后无法回显问题
         *  补充：IDEA中引入 UEditor 编辑器图片回显问题

--------------------

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

![在这里插入图片描述][20210331095419444.png_pic_center]

--------------------

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

pom.xml中添加以下依赖：

<dependency>
    	  <groupId>org.json</groupId>
    	  <artifactId>json</artifactId>
    	  <version>20160810</version>
    	</dependency>
    	
    	<dependency>
    	  <groupId>commons-fileupload</groupId>
    	  <artifactId>commons-fileupload</artifactId>
    	  <version>1.3.1</version>
    	</dependency>

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

![在这里插入图片描述][20210331142658348.gif_pic_center]  
上传的图片他会默认存放在服务器的指定文件夹下，结果如图：  
  ![在这里插入图片描述][20210331142847815.png_pic_cener]

--------------------

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

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

![在这里插入图片描述][20210331235853172.gif_pic_center]

上传效果图如下：  
  ![在这里插入图片描述][2021033123575443.png_pic_left]

整体效果如下图所示：

![在这里插入图片描述][2021033122274856.gif_pic_center]

--------------------

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

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

![在这里插入图片描述][20210331145816139.png_pic_center]

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

![在这里插入图片描述][20210331150049455.png_pic_center]

--------------------

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

[20210331095419444.png_pic_center]: https://img-blog.csdnimg.cn/20210331095419444.png#pic_center
[20210331142658348.gif_pic_center]: https://img-blog.csdnimg.cn/20210331142658348.gif#pic_center
[20210331142847815.png_pic_cener]: https://img-blog.csdnimg.cn/20210331142847815.png?#pic_cener
[20210331143248943.png_pic_left]: https://img-blog.csdnimg.cn/20210331143248943.png?#pic_left
[202103312349565.png_pic_left]: https://img-blog.csdnimg.cn/202103312349565.png?#pic_left
[20210331144104889.png_pic_left]: https://img-blog.csdnimg.cn/20210331144104889.png?#pic_left
[20210331235853172.gif_pic_center]: https://img-blog.csdnimg.cn/20210331235853172.gif#pic_center
[2021033123575443.png_pic_left]: https://img-blog.csdnimg.cn/2021033123575443.png?#pic_left
[2021033122274856.gif_pic_center]: https://img-blog.csdnimg.cn/2021033122274856.gif#pic_center
[20210331145745119.png]: https://img-blog.csdnimg.cn/20210331145745119.png?
[20210331145816139.png_pic_center]: https://img-blog.csdnimg.cn/20210331145816139.png#pic_center
[20210331150049455.png_pic_center]: https://img-blog.csdnimg.cn/20210331150049455.png?#pic_center