解决layui富文本编辑器图片上传无法回显的问题
时间:2019-09-18
本文章向大家介绍解决layui富文本编辑器图片上传无法回显的问题,主要包括解决layui富文本编辑器图片上传无法回显的问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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富文本编辑器图片上传无法回显的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- 高效 Mac 人士必备:实现工作/家庭间网络环境切换的自动化
- android中AVD的使用
- ASP.NET MVC 2示例Tailspin Travel UI层分析
- CSS 命名之Dialog, Modal, Popup, Popover, Lightbox 等的区别
- Eclipse JAVA文件注释乱码
- 2018年小程序的红利趋势预测,懂的来……或许你将成为下个富翁
- VUE 入门基础(6)
- 五年换4高管,6000员工裁95%剩300人,王健林为何抛弃万达网科?
- Android Permission中英对照
- 你知道人脸识别技术是如何实现的吗?
- WordPress REST API 定制化输出
- ASP.NET MVC的Action Filter
- Android LayoutInflater详解
- 在Android中实现service动态更新UI界面
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- LeetCode(面试题:二维数组中的查找)
- 面试题05-替换空格(LeeCode)
- 解决Mybatis当实体类中的属性名和表中的字段名不一致的问题
- 图书管理系统(一)项目框架结构搭建
- Mybatis中模糊查询like语句的使用方法
- win10暴力查看wifi密码
- 再也不怕面试官问java中的goto关键字了?
- 死磕Java之分析short类型
- 死磕Java之Java数据类型的来龙去脉
- 请不要再使用判断进行参数校验了
- 检测假新闻:比较不同的分类方法的准确率
- SpringBoot下载xlsx模板,导出excel数据
- 如何利用机器学习和Gatsby.js创建假新闻网站
- Spring Security 实战干货: 401和403状态
- Spring Data R2DBC响应式操作MySQL