解决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架构javascript基础体系
Jan 01 Javascript
jquery each()源代码
Feb 14 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
vue中使用props传值的方法
May 08 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 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中文分词 自动获取关键词介绍
2012/11/13 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
Bootstrap Validator 表单验证
2016/07/25 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
python 解压pkl文件的方法
2018/10/25 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
如何在python中实现随机选择
2019/11/02 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
店长助理岗位职责
2013/12/13 职场文书
领导干部考察材料
2014/02/08 职场文书
爱我中华教学反思
2014/04/28 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
护理实习生带教计划
2015/01/16 职场文书