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富文本編輯器圖片上傳無法回顯怎么辦”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!