layui富文本编辑器上传图片java_解决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 map = new HashMap();
Map map2 = new HashMap();
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富文本编辑器图片上传无法回显的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
layui富文本编辑器上传图片java_解决layui富文本编辑器图片上传无法回显的问题...相关推荐
- vue中使用wangeditor富文本编辑器(含图片上传和回显)
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
- layui富文本编辑器图片上传无法回显问题解决
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
- 一般网站上传图片的大小是多少?网站图片上传格式大小建议 附带简单修图方法
一般网站上传图片的大小是多少呢?尚网汇智给您列一下网站图片上传格式大小建议: 首先,上传图片格式: 通常图片以JPG图片居多,JPG格式的图片较小,图片也比较柔和 不过特殊情况就要用特殊格式的图片了 ...
- 图片上传压缩java_【java基础】压缩图片上传
1.pom.xml net.coobird thumbnailator 0.4.8 2.代码 /** * 上传图片 */ @RequestMapping(method = RequestMethod. ...
- java上传图片报404_如何解决SpringBoot集成百度UEditor图片上传后直接访问404
SpringBoot项目上传图片一般是上传至远程服务器存储,开发过程中可能会上传至当前项目的某个静态目录中,此时就会遇到这个问题,文件在上传之后直接访问并不能被访问到,必须重新加载项目. 首先分析一下 ...
- 为什么手机上传图片这么慢 前端_移动端图片上传旋转、压缩的解决方案
前言 在手机上通过网页 input 标签拍照上传图片,有一些手机会出现图片旋转了90度d的问题,包括 iPhone 和个别三星手机.这些手机竖着拍的时候才会出现这种问题,横拍出来的照片就正常显示.因此 ...
- mavon-editor编辑器与图片上传
mavon-editor编辑器与图片上传 图片上传是一个常用的功能,今天我们来实现基于Vue的Markdown编辑器--mavon-editor的图片上传功能. 一.安装与引入 1. 首先在命令行安装 ...
- Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景 系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
- vue项目 vue-quill-editor富文本编辑器+图片上传
目录 基础使用: 进阶版: 使用 el-upload 图片上传: 进阶版2.0: 可拖动调整图片大小: 基础使用: 富文本编辑器: 此方法得到的图片为base64编码,图片上传在下面. npm ins ...
最新文章
- 魔法科技迈吉客未来起飞路径猜想
- 建议收藏,清华高材生准备的90条Python程序建议
- python paramiko_Python Paramiko基本使用
- 交易系统单服务器tps,交易者必看!一文了解TPS量化交易系统
- 简明python教程 --C++程序员的视角(七):异常
- oracle 命令日志输出,ORACLE常用命令日志
- 前谷歌技术主管亲述:程序员请避开这几大雷区
- linux workon 命令,安装python虚拟运行环境,linux下配置workon切换虚拟环境
- 如何快速学习PLC编程
- TMC2300-LA 低压、超静音微型步进电机驱动器
- 如何在手机上新建html文件夹,用手机怎么制作网页
- YOLO模型train.py文件报错:size mismatch for last_layer0.6.weight: copying a param with shape torch.
- Python爬虫练习:爬取猫眼电影实时票房
- Apue学习:高级I/O
- 炒股程序化交易接口怎么获取实时行情
- 黄金etf持仓量如何算
- javaweb实现文件下载用ajax请求,浏览器无响应的问题
- auto.js Pro编写的QQ跳码注册陌陌稳定版脚本源代码,免root运行
- 分布式任务调度中心xxl-job
- 清华大学计算机王佳希,北大清华2012年拟录取保送生名单及简析(北京市)
热门文章
- pdf转换成ppt转换器
- 微信铃声怎么设置,详细图文教学,轻松掌握
- Java注解篇(一)四大元注解@Target@Retention@Documented注解
- echo框架使用:获取与配置
- Java实现第十一届蓝桥杯C/C++ 大学 B 组大赛软件类 省赛真题(希望能和各位大佬能一起讨论算法题:讨论群:99979568)
- [转]通过Chroot机制让服务器安全到底
- 唐朝边戍 NFT 作品集 2.0 上线市场平台,体验中国古代文化的魅力
- TikZ从零开始(一)——A Picture for Karl’s Students(上篇)
- php pjax案例,jQuery pjax简单示例汇总
- UiPath Excel创建数据透视图(21.10现代设计体验)