解决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 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 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世纪万年历
2006/12/06 PHP
PHP详细彻底学习Smarty
2008/03/27 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
React事件处理的机制及原理
2018/12/03 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
Python做文本按行去重的实现方法
2016/10/19 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
基于python实现把图片转换成素描
2019/11/13 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
25道Java面试题集合
2013/05/21 面试题
初中教师业务学习材料
2014/05/12 职场文书
办理房产证委托书
2014/09/18 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书