解决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 函数速查表
Feb 07 Javascript
jquery中动态效果小结
Dec 16 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
jQuery each函数源码分析
May 25 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
JS中作用域以及变量范围分析
Jul 18 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中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
小程序实现多列选择器
2019/02/15 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
谈谈python中GUI的选择
2018/03/01 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
Python基于Faker假数据构造库
2020/11/30 Python
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
教师年终个人自我评价
2013/10/04 职场文书
中队活动总结
2014/08/27 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
详解CSS3浏览器兼容
2022/12/24 HTML / CSS