解决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 confirm()方法的使用方法实例
Jul 13 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
vue 实现走马灯效果
Oct 28 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
JS实现简单的九宫格抽奖
Jun 28 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获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
javascript闭包入门示例
2014/04/30 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
高三自我鉴定怎么写
2013/10/19 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
单位工资证明范本
2015/06/12 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
MySQL创建表操作命令分享
2022/03/25 MySQL
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers