解决layui富文本编辑器图片上传无法回显的问题

 更新时间:2019年09月18日 16:37:24   作者:韩迎宾  
今天小编就为大家分享一篇解决layui富文本编辑器图片上传无法回显的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问题找了好久才找到原来是返回的数据结构不符合layui要求,经过修改才得以解决,现在把代码贴出来共享。加粗字体的代码是返回数据结构

@ResponseBody
@RequestMapping(value = "fillupf", method = RequestMethod.POST)
public String fillupf(@RequestParam("file") MultipartFile[] files) {
try {
String[] courseware = new String[files.length];
int index = 0;
for (MultipartFile file : files) {
boolean isLegal = false;
for (String type : ALLOW_FILE_TYPE) {
if (StringUtils.endsWithIgnoreCase(file.getOriginalFilename(), type)) {
isLegal = true;
break;
}
}
// 封装Result对象,并且将文件的byte数组放置到result对象中
PicUploadResult fileUploadResult = new PicUploadResult();
// 状态
fileUploadResult.setError(isLegal ? 0 : 1);
// 文件新路径
String filePath = getFilePath(file.getOriginalFilename());
if (LOGGER.isDebugEnabled()) {
LOGGER.debug("Pic file upload .[{}] to [{}] .", file.getOriginalFilename(), filePath);
}
// 生成图片的绝对引用地址
String picUrl = StringUtils.replace(StringUtils.substringAfter(filePath, propertieService.REPOSITORY_PATH), "\\", "/");
fileUploadResult.setUrl(propertieService.IMAGE_BASE_URL + picUrl);
File newFile = new File(filePath);
// 写文件到磁盘
file.transferTo(newFile);
// 状态
fileUploadResult.setError(isLegal ? 0 : 1);
if (!isLegal) {
// 不合法,将磁盘上的文件删除
newFile.delete();
}
courseware[index++] = fileUploadResult.getUrl();
}
String fillUrls=StringUtils.join(courseware, ",");
Map<String,Object> map = new HashMap<String,Object>();
      Map<String,Object> map2 = new HashMap<String,Object>();
      map.put("code",0);//0表示成功,1失败
      map.put("msg","上传成功");//提示消息
      map.put("data",map2);
      map2.put("src",fillUrls);//图片url
      map2.put("title","图片丢失");//图片名称,这个会显示在输入框里
      JSONObject jsonObject = JSONObject.fromObject(map); 
      String result = jsonObject.toString();
      return result;
} catch(Exception e) {

}
return null;
}

以上这篇解决layui富文本编辑器图片上传无法回显的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JS实现的碰撞检测与周期移动完整示例

    JS实现的碰撞检测与周期移动完整示例

    这篇文章主要介绍了JS实现的碰撞检测与周期移动,结合完整实例形式分析了javascript结合时间函数的页面元素属性动态操作及事件响应相关使用技巧,需要的朋友可以参考下
    2019-09-09
  • window resize和scroll事件的基本优化思路

    window resize和scroll事件的基本优化思路

    在项目中使用scroll事件去加载数据,结果IE下悲剧了。下面为大家介绍下window resize和scroll事件的基本优化思路,需要的朋友可以参考下
    2014-04-04
  • JS按字节截取字符长度实例

    JS按字节截取字符长度实例

    这篇文章主要介绍了JS按字节截取字符长度实例,有需要的朋友可以参考一下
    2013-11-11
  • js如何构造elementUI树状菜单的数据结构详解

    js如何构造elementUI树状菜单的数据结构详解

    由于业务需要,要求实现树形菜单,且菜单数据由后台返回,下面这篇文章主要给大家介绍了关于js如何构造elementUI树状菜单的数据结构的相关资料,需要的朋友可以参考下
    2021-05-05
  • JS数字抽奖游戏实现方法

    JS数字抽奖游戏实现方法

    这篇文章主要介绍了JS数字抽奖游戏实现方法,可实现按下回车键出现随机数字切换的效果,涉及时间与随机数的相关操作技巧,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • 实例讲解DataTables固定表格宽度(设置横向滚动条)

    实例讲解DataTables固定表格宽度(设置横向滚动条)

    下面小编就为大家带来一篇实例讲解DataTables固定表格宽度(设置横向滚动条)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

    WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

    下面小编就为大家带来一篇WebStorm ES6 语法支持设置&babel使用及自动编译(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 有道JavaScript监听浏览器的问题

    有道JavaScript监听浏览器的问题

    相信大家在web项目中,经常会用到javascript的事件监听、事件冒泡这些东西。当然也包括window.opener,window.showModalDialog这些父子窗口的互操作。
    2010-06-06
  • javascript数组输出的两种方式

    javascript数组输出的两种方式

    这篇文章主要介绍了javascript数组输出的两种方式,涉及javascript数组遍历的常用技巧,需要的朋友可以参考下
    2015-01-01
  • js+css实现飞机大战游戏

    js+css实现飞机大战游戏

    这篇文章主要为大家详细介绍了js+css实现飞机大战游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05

最新评论