解决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 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
jQuery插件之validation插件
Mar 29 jQuery
JS中的三个循环小结
Jun 20 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 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判断两个浮点数是否相等的方法
2015/03/14 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
python实现linux下使用xcopy的方法
2015/06/28 Python
简单了解Django模板的使用
2017/12/20 Python
python3 读取Excel表格中的数据
2018/10/16 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
管理失职检讨书
2014/02/12 职场文书
信息管理专业自荐书
2014/06/05 职场文书
党员四风剖析材料
2014/08/27 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
Redis唯一ID生成器的实现
2022/07/07 Redis