解決layui富文本編輯器圖片上傳無法回顯的問題
layui富文本編輯器用起來挺方便的,但是不足的是不提供圖片上傳的接口,需要自己寫上傳接口,而且返回的數(shù)據(jù)類型要符合layui富文本編輯器圖片上傳插件的要求,否則圖片可以上傳成功,但是無法回顯,這個問題找了好久才找到原來是返回的數(shù)據(jù)結(jié)構(gòu)不符合layui要求,經(jīng)過修改才得以解決,現(xiàn)在把代碼貼出來共享。加粗字體的代碼是返回數(shù)據(jù)結(jié)構(gòu)
@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數(shù)組放置到result對象中
PicUploadResult fileUploadResult = new PicUploadResult();
// 狀態(tài)
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);
// 狀態(tài)
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富文本編輯器圖片上傳無法回顯的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于__defineGetter__ 和__defineSetter__的說明
關(guān)于__defineGetter__ 和__defineSetter__的說明...2007-05-05
javascript+xml技術(shù)實現(xiàn)分頁瀏覽
基于web的技術(shù)中,分頁是一個老的不能再老的,但大家津津樂道的問題,隨著xml技術(shù)的日漸應(yīng)用,把xml應(yīng)用到分頁當(dāng)中,也是一種可能,當(dāng)然網(wǎng)上的教程很多,當(dāng)我都是看得稀里糊涂,索性自己寫一個,與大家分享、指正。2008-07-07
javascript設(shè)計模式 – 外觀模式原理與用法實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 外觀模式,結(jié)合實例形式分析了javascript外觀模式基本概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
2007/12/23更新創(chuàng)意無限,簡單實用(javascript log)
在javascript開發(fā)過程中,如果總是使用alert的方式調(diào)試程序,在某些簡單的程序中是可行的. 但是在通常的項目很復(fù)雜,這種方式已經(jīng)很難滿足,企業(yè)級開發(fā)的需要。2007-12-12
前端插件之Bootstrap Dual Listbox使用教程
這篇文章主要介紹了前端插件之Bootstrap Dual Listbox使用教程,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07

