解决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函数
Aug 01 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
Node.js使用Koa搭建 基础项目
Jan 08 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在字符断点处截断文字的实现代码
2011/04/21 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
php制作简单模版引擎
2016/04/07 PHP
laravel学习教程之存取器
2016/07/30 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
Python 正则表达式(转义问题)
2014/12/15 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
Django中Middleware中的函数详解
2019/07/18 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
香港礼品网站:GiftU eshop
2017/09/01 全球购物
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
大学生村官心得体会范文
2014/01/04 职场文书
市三好学生主要事迹
2014/01/28 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
完整版商业计划书
2014/09/15 职场文书
客房领班岗位职责
2015/02/11 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书