解决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 相关文章推荐
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
学习ExtJS Panel常用方法
Oct 07 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
JS实现在线ps功能详解
Jul 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设计模式  Command(命令模式)
2011/06/17 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
PHP实现搜索相似图片
2015/09/22 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
filemanage功能中用到的common.js
2007/04/08 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
Python Pillow Image Invert
2019/01/22 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
Python爬虫教程知识点总结
2020/10/19 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
电子工程专业毕业生求职信
2014/03/14 职场文书
美术指导求职信
2014/03/17 职场文书
介绍信格式
2015/01/30 职场文书
超市督导岗位职责
2015/04/10 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
催款函范本大全
2015/06/24 职场文书
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js