UEditor 编辑器实现文件上传到服务器及图片回显问题_ueditor上传图片回显-程序员宅基地

技术标签: UEditor编辑器  百度  jsp  

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



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

在这里插入图片描述


一、导入 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>

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

在这里插入图片描述
上传的图片他会默认存放在服务器的指定文件夹下,结果如图:
  在这里插入图片描述


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

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

在这里插入图片描述

上传效果图如下:
  在这里插入图片描述

整体效果如下图所示:

在这里插入图片描述


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

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

在这里插入图片描述

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

在这里插入图片描述


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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43819566/article/details/115342524

智能推荐

微信小程序简单的form表单本地储存数据_微信小程序单选框数据保存在哪里-程序员宅基地

文章浏览阅读1.1w次,点赞8次,收藏49次。效果图:主要利用小程序的getStorage来实现异步本地储存。小程序目录结构如下:新建项目前,为了简化操作可直接右键新建目录,这样建出来的文件会直接写在app.json中,无需手动添加。login.wxml代码:&lt;!--pages/login/login.wxml--&gt;&lt;view class='container'&gt; &lt;form bindsubmit='sub..._微信小程序单选框数据保存在哪里

程序员在页面友好性上常犯的5种错误以及改正方法_程序出错状态及其纠正方法-程序员宅基地

文章浏览阅读929次。程序员在页面友好性上常犯的5种错误以及改正方法 我是一个性情乖戾的web用户,但我想这也帮助促使我成为了一名优秀的Web开发人员。当我看到一个网站上有让人不爽的设计时就会非常的恼怒,一些很简单的东西为什么做不好?下面是5种常见的可用性方面的错误,以及如何纠正这些问题的方法。给自己方便,也与人方便,确保自己不要犯这样的错误。使用表达submit事件,不要用click事件;请_程序出错状态及其纠正方法

Android jdb debug-程序员宅基地

文章浏览阅读83次。在ubuntu上android的debug的方式有很多种,可以用eclipse,android studio。但是有的时候,为了方便也可以用命令行去debug。下面列出命令行debug的过程xxx:~$ cd source/xxx:~/source$ cd packages/apps/Settings/xx:~/source/packages/apps/Settings$ adb s..._通过jdb动态调试找到正确的变量,然后进行代码注入,修改try again 为hacked!!

Autotools (1)_no available formula with the name "autotools-程序员宅基地

文章浏览阅读565次。1. File Format of *.pc FilesThe heart of pkg-config lies in the data files that the various applications install. These data files are actually simple text files with some special syntax thrown in_no available formula with the name "autotools

使用postman解决浏览器POST测试时登录问题:未登录无法进行POST提交_post请求 未登录,无法进行访问-程序员宅基地

文章浏览阅读8k次,点赞5次,收藏5次。在写后端接口时需要测试接口是否可用,这里使用postman进行接口的测试。使用浏览器时可以进行get请求,但是post就会提交失败,有博主说在浏览器控制台输入以下js代码可以进行post提交:fetch(new Request('url',{ method:'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, body:"param1=value1&param2=value2"}_post请求 未登录,无法进行访问

随便推点

变量声明-程序员宅基地

文章浏览阅读98次。var v1 intvar v2 stringvar v3 [10]int // 数组var v4 []int // 数组切片var v5 struct {f int}var v6 *int // 指针var v7 map[string]int // map, key为string类型, value为int类型v..._怎样声明私bai有变量

数据库创建用户授权-程序员宅基地

文章浏览阅读105次。CREATE USER 'username'@'host' IDENTIFIED BY 'password';grant 权限 on 数据库.* to 用户名@登录主机 identified by "密码"; grantselectonv_$mystattotest1; 给onv_$mystat赋值权限查看视图转载于:https://www.cnblogs...._达梦数据库创建用户授权者没有此授权权限

android ffmpeg 编码h264,Mac系统下ffmpeg+h264+flv编码的android录制屏幕实现2-程序员宅基地

文章浏览阅读139次。接上一篇。activity_flv.xmlxmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".FlvActivity">android:layout_width="match_pa..._m_pcodecctx->pix_fmt

又一知名教授在美被捕!饶毅发文声援,中方也回应了!-程序员宅基地

文章浏览阅读623次。点击上方“计算机视觉工坊”,选择“星标”干货第一时间送达 来源丨中国新闻网、环球网、环球人物、饶毅公众号 编辑丨募格学术美东时间1月14日,美国司法部官网消息显示,美国工程院院士、麻省..._田長霖基金會名聲

SSH整合 出现常见错误(转)-程序员宅基地

文章浏览阅读592次。0、 需要标识符a) 不在函数内1、 非法表达式开始b) 可能:丢失括号 .2. no data founda) 可能:setInt(1,100)中,没有100这个值3. 找不到符号a) 可能:没导入包4. 指定了无效URLa) 可能:数据库名或IP错误,即连接出错5. 类路径没有找到a) 可能: ClassNotFoundException: oracle.jdbc.driver.Or..._ssh password was requested

《山海经》异兽75种,附图-程序员宅基地

文章浏览阅读2.6k次。本文是我在在网络上搜集资料之汇总,难免有缺漏,而且,这些个图片想全部搜集到符合形象的真是难上加难……总之,你有更好的图片或者我有异兽没有列出来,请指明。山海经异兽是《山海经》记载的奇异怪兽75种。《山海经》是先秦古籍,是一部富于神话传说的最古老的地理书。它主要记述古代地理、物产、神话、巫术、宗教等,也包括古史、医药、民俗、民族等方面的内容。除此之外,《山海..._山海经异兽75种

推荐文章

热门文章

相关标签