解决layui富文本编辑器图片上传无法回显的问题

2024-02-25 21:17:35

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富文本编辑器图片上传无法回显的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

ThinkPHP5+Layui实现图片上传加预览功能

html代码 <div class="layui-upload"> <button type="button" class="layui-btn" id="cover">上传封面</button> </div> <div class="layui-input-inline"> <img id="preview" width
layui表格数据复选框回显设置方法

layui2.3版本,本身并不带有复选框回显功能,那么需要从源头解决此事,F12代码调试,找到与复选框关联的地方发现: 我们只需要在渲染数据回调时找到每个复选框根据数据的不同来设置回显. layui这里有一个坑,设置class属性后会造成二次点击效果,千万不要手动修改class属性,那么应该怎么办呢? 每次**点击**其中一个复选框时都会增加一个class属性,第二次点击又会给删除: table.render({ elem: '#LAY_table_topic', url: '/admin/to
layui table数据修改的回显方法

实现的样式给你们看一波点击这锅按钮其实回显就是一个赋值的操作,先把form表单的那些input 框的id拿到,在展示成功的那里进行绑值 table.on('tool(test)', function(obj) { var data = obj.data; // 获得当前行数据 var layEvent = obj.event; // 获得 lay-event 对应的值(也可以是表头的event 参数对应的值) var tr = obj.tr; // 获得当前行 tr 的DOM对象 if (l
解决layui 三级联动下拉框更新时回显的问题

最近接触layui,比较简洁美观的一款ui,但也有很多小坑,记录一下实现省市区下拉三级联动更新回显的问题 <%--监听省份选择 --%> form.on('select(uprovinceId)', function(data){ initCityList('change'); }); 这里面有个问题就是选择的时候如果请选择的value 是"" 空字符串,当选择从河北省变到请选择时不会触发这个监听事件 <script type="text/javaS
使用js在layui中实现上传图片压缩

一.关于js上传图片压缩的方法,百度有很多种方法,这里我参考修改了一下 function photoCompress(file, w, objDiv) { var ready = new FileReader(); /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/ ready.read
layui实现文件或图片上传记录

本文为大家分享了layui实现文件或图片上传记录的具体代码,供大家参考,具体内容如下首先是layui自己的官网关于图片/文件上传的帮助文档: 接下来是我自己的使用记录: 1.首先在js中定义一个全局变量 var uploadListIns; 2.进行赋值 //多文件列表示例 /** * 图片上传 */ layui.use('upload', function(){ var $ = layui.jquery,upload = layui.upload; var demoListView = $(
解决layui富文本编辑器图片上传无法回显的问题

layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问题找了好久才找到原来是返回的数据结构不符合layui要求,经过修改才得以解决,现在把代码贴出来共享.加粗字体的代码是返回数据结构 @ResponseBody @RequestMapping(value = "fillupf", method = RequestMethod.POST) pu
SpringBoot2.0实现多图片上传加回显

目录上传效果展示配置上传图片的属性异常处理遇到的坑完整代码地址这两天公司有需求让做一个商户注册的后台功能,其中需要商户上传多张图片并回显.由于之前没做过这方面的东西,此篇文章用以记录一些知识点,以便后续查看. 上传 Controller的代码非常简单,由于用了SpringMVC框架,所以直接用MultipartFile来接即可.由于是多图片上传所以用数组来接.此处应该注意参数名应该和<input>中的name值相对应 @RequestMapping("/pic"
利用node+koa+axios实现图片上传和回显功能

目录前言开发前需要掌握的一些库代码结构实现代码前言代码地址开发前需要掌握的一些库 koa:用来起一个web服务器 koa2-cors: 解决跨域问题 @koa/router: koa的路由处理 koa-body: koa参数的获取 koa-static: 静态内容 @koa/multer multer:图片上传的插件代码结构实现代码 1.第一步:用koa+koa-router搭建一个简单的web服务 //main.js const Koa = require('koa') //
Spring Boot 实现图片上传并回显功能

一.常规形式 1 项目结构 2 配置文件及环境设置 (1)配置文件 # 应用服务 WEB 访问端口 server.port=8080 # spring 静态资源扫描路径 spring.resources.static-locations=classpath:/static/ # 访问template下的html文件需要配置模板 spring.thymeleaf.prefix.classpath=classpath:/templates/ # 是否启用缓存 spring.thymeleaf.cac
layui富文本编辑器前端无法取值的解决方法

首先,需要简单说下layui这个框架,个人觉得属于那种比较好用的框架,包括他的极简流畅的弹框,很适合那种主要写后端的程序员和快速开发的团队本期主要讲的是layui富文本编辑器这个东西,他的模式是在某个textarea的基础上建立了一个富文本编辑器,也就是说你填写在富文本编辑器的值其实是放在编辑器里面的,并没有放在之前的textarea中,你获取textarea的值的时候需要先把富文本编辑器的值同步到之前的textarea中,然后才能通过textarea获取对应的值主要代码如下: 下图是通过浏
C#使用百度Ueditor富文本框实现上传文件

目录使用背景准备创建项目配置项目使用使用背景项目中需要用的富文本框去上传视频,图片的话大部分都是可以的.相对来说,国外的富文本框很成熟.但鉴于文档是英语,这里使用了百度的富文本框. 采用的api的方式,调用接口进行上传文件.话不多说,开撸! 准备创建一个.net mvc的项目.下载百度富文本框.net 版本的js文件. 创建项目创建好项目之后,首先引用一下富文本框的js.目录如下: 然后新增一个单页.这里使用的 home 控制器下的index页面.代码如下 : @{ View
layui 富文本编辑器和textarea值的相互传递方法

1.富文本编辑器传递值给textarea <div class="layui-form-item layui-form-text"> <label class="layui-form-label">资讯内容</label> <div class="layui-input-block"> <textarea name="content" id="demo"
tp5使用layui实现多个图片上传(带附件选择)的方法实例

tp5使用layui实现多个图片上传(带附件选择),如何加载layui在此不详细说明,有需要可以百度 html代码,主要处理都是在jq中,完成方法全部原创,也许不是最简单的,但也能实现效果 {include file="public/header" /} <body> <div class="x-nav"> <span class="layui-breadcrumb"> <a href="&qu
如何用input标签和jquery实现多图片的上传和回显功能

本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图效果图我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file标签非常丑,我们美化一下它,不会的可以百度一下,就是外面套个盒子,设置input的opacity为0,然后外面的盒子设计成我们喜欢的样式即可,我就随便做了一下. 大概的样式还是放一下源码,只谈效果,不放源码的都是耍流氓这是body <body> <div class="

解决layui富文本编辑器图片上传无法回显的问题

相关推荐

随机推荐