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


Posted in Javascript onSeptember 18, 2019

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富文本编辑器图片上传无法回显的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
js窗口震动小程序分享
Nov 28 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
JavaScript实现拖拽盒子效果
Feb 06 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 #Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 #Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 #Javascript
layui复选框限制选择个数的方法
Sep 18 #Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 #Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 #Javascript
Vue Components 数字键盘的实现
Sep 18 #Javascript
You might like
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
mysql limit查询优化分析
2008/11/12 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
js继承 Base类的源码解析
2008/12/30 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
Python实例之wxpython中Frame使用方法
2014/06/09 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
python hash每次调用结果不同的原因
2019/11/21 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
跟单文员的岗位职责
2013/11/14 职场文书
总经理岗位职责描述
2014/02/08 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
2014年材料员工作总结
2014/11/19 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server