解決layui富文本編輯器圖片上傳無(wú)法回顯的問(wèn)題
layui富文本編輯器用起來(lái)挺方便的,但是不足的是不提供圖片上傳的接口,需要自己寫(xiě)上傳接口,而且返回的數(shù)據(jù)類型要符合layui富文本編輯器圖片上傳插件的要求,否則圖片可以上傳成功,但是無(wú)法回顯,這個(gè)問(wèn)題找了好久才找到原來(lái)是返回的數(shù)據(jù)結(jié)構(gòu)不符合layui要求,經(jīng)過(guò)修改才得以解決,現(xiàn)在把代碼貼出來(lái)共享。加粗字體的代碼是返回?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); // 寫(xiě)文件到磁盤(pán) file.transferTo(newFile); // 狀態(tài) fileUploadResult.setError(isLegal ? 0 : 1); if (!isLegal) { // 不合法,將磁盤(pán)上的文件刪除 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富文本編輯器圖片上傳無(wú)法回顯的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- layui 阻止圖片上傳的實(shí)例(before方法)
- layui 上傳圖片 返回圖片地址的方法
- layui實(shí)現(xiàn)圖片虛擬路徑上傳,預(yù)覽和刪除的例子
- 在LayUI圖片上傳中,解決由跨域問(wèn)題引起的請(qǐng)求接口錯(cuò)誤的方法
- layui 富文本圖片上傳接口與普通按鈕 文件上傳接口的例子
- layui 圖片上傳+表單提交+ Spring MVC的實(shí)例
- layui實(shí)現(xiàn)文件或圖片上傳記錄
- ThinkPHP5+Layui實(shí)現(xiàn)圖片上傳加預(yù)覽功能
- layui實(shí)現(xiàn)多圖片上傳并限制上傳的圖片數(shù)量
相關(guān)文章
JS排序算法之希爾排序與快速排序?qū)崿F(xiàn)方法
這篇文章主要介紹了JS排序算法之希爾排序與快速排序?qū)崿F(xiàn)方法,結(jié)合實(shí)例形式分析了希爾排序與快速排序的原理及javascript實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-12-12JS實(shí)現(xiàn)簡(jiǎn)單易用的手機(jī)端浮動(dòng)窗口顯示效果
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單易用的手機(jī)端浮動(dòng)窗口顯示效果,涉及javascript針對(duì)頁(yè)面元素的動(dòng)態(tài)操作相關(guān)技巧,適用于做廣告展示,需要的朋友可以參考下2016-09-09Javascript 5種方法實(shí)現(xiàn)過(guò)濾刪除前后所有空格
這篇文章主要介紹Javascript 5種過(guò)濾刪除前后所有空格的方法,比較實(shí)用,需要的朋友可以參考下。2016-06-06利用JQuery和JS實(shí)現(xiàn)奇偶行背景顏色自定義效果
本文將詳細(xì)介紹利用JQuery和JS實(shí)現(xiàn)奇偶行背景顏色自定義效果,需要的朋友可以參考下2012-11-11關(guān)閉瀏覽器時(shí)提示onbeforeunload事件
這篇文章主要介紹了關(guān)閉瀏覽器時(shí)提示onbeforeunload事件,有需要的朋友可以參考一下2013-12-12