解决layui富文本编辑器图片上传无法回显的问题
更新时间:2019年09月18日 16:37:24 作者:韩迎宾
今天小编就为大家分享一篇解决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富文本编辑器图片上传无法回显的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
关于__defineGetter__ 和__defineSetter__的说明
关于__defineGetter__ 和__defineSetter__的说明...2007-05-05
javascript设计模式 – 外观模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 外观模式,结合实例形式分析了javascript外观模式基本概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04
2007/12/23更新创意无限,简单实用(javascript log)
在javascript开发过程中,如果总是使用alert的方式调试程序,在某些简单的程序中是可行的. 但是在通常的项目很复杂,这种方式已经很难满足,企业级开发的需要。2007-12-12
前端插件之Bootstrap Dual Listbox使用教程
这篇文章主要介绍了前端插件之Bootstrap Dual Listbox使用教程,本文给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-07-07


最新评论