解决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兼容标准的表格变色效果
Jun 28 Javascript
javascript中的void运算符语法及使用介绍
Mar 10 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 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
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
php常量详细解析
2015/10/27 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
python求最大连续子数组的和
2018/07/07 Python
python中的json总结
2018/10/11 Python
python3实现多线程聊天室
2018/12/12 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
中国跨境电商:Tomtop
2017/03/16 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
初三学生个人自我评定
2014/04/06 职场文书
民族学专业求职信
2014/07/28 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
地球上的星星观后感
2015/06/02 职场文书
时尚女魔头观后感
2015/06/04 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript