解决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 面向对象技术基础教程
Mar 03 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 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
基于mysql的论坛(1)
2006/10/09 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
JavaScript入门教程 Cookies
2009/01/31 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
Angular的$http与$location
2016/12/26 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
python 将字符串转换成字典dict
2013/03/24 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
Django后台admin的使用详解
2019/07/08 Python
pip安装python库的方法总结
2019/08/02 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
一个C/C++编程面试题
2013/11/10 面试题
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
化学系大学生自荐信范文
2014/03/01 职场文书
市场营销工作计划书
2014/09/15 职场文书
经理助理岗位职责
2015/02/02 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
HAM-2000摩机图
2021/04/22 无线电
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
vue判断按钮是否可以点击
2022/04/09 Vue.js
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL