快捷導(dǎo)航

解決layui富文本編輯器圖片上傳無法回顯的問題

更新時(shí)間：2019年09月18日 16:37:24 作者：韓迎賓

今天小編就為大家分享一篇解決layui富文本編輯器圖片上傳無法回顯的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

layui富文本編輯器用起來挺方便的，但是不足的是不提供圖片上傳的接口，需要自己寫上傳接口，而且返回的數(shù)據(jù)類型要符合layui富文本編輯器圖片上傳插件的要求，否則圖片可以上傳成功，但是無法回顯，這個(gè)問題找了好久才找到原來是返回的數(shù)據(jù)結(jié)構(gòu)不符合layui要求，經(jīng)過修改才得以解決，現(xiàn)在把代碼貼出來共享。加粗字體的代碼是返回?cái)?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對(duì)象，并且將文件的byte數(shù)組放置到result對(duì)象中
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);
}
// 生成圖片的絕對(duì)引用地址
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","圖片丟失");//圖片名稱，這個(gè)會(huì)顯示在輸入框里
      JSONObject jsonObject = JSONObject.fromObject(map); 
      String result = jsonObject.toString();
      return result;
} catch(Exception e) {

}
return null;
}

以上這篇解決layui富文本編輯器圖片上傳無法回顯的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: