解决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 相关文章推荐
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 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 split汉字
2009/06/05 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
javascript中获取选中对象的类型
2007/04/02 Javascript
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
JavaScript 继承详解(一)
2009/07/13 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
python opencv进行图像拼接
2020/03/27 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
学生党支部先进事迹
2014/02/04 职场文书
心理健康活动总结
2014/04/30 职场文书
投资建议书模板
2014/05/12 职场文书
入党综合考察材料
2014/06/02 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书