springboot+UEditor圖片上傳


springboot+UEDitor百度編輯器整合圖片上記錄於此

 

1、下載ueditor插件包,解壓到static/ueditor目錄下

 

2、在你所需實現編輯器的頁面引用三個JS文件

     1)  ueditor.config.js   2)  ueditor.all.min.js  3)zh-cn.js

     

th:utext回顯富文本內容

 

<textarea id="container"   name="content"  th:utext="${xxx}"  type="text/plain"   style="width:800px;height:400px;">

</textarea>

 

初始化富文本編輯器

 

UE.getEditor('container');

 

這一步沒有問題的話,頁面上應該看到富文本編輯器了,但控制台會提示配置錯誤,接下來配置富文本參數值

 

 

3、找到ueditor.config.js配置文件serverUrl的參數,設置成你項目的請求路徑,后面上傳圖片的請求路徑也是這個!!!

只不過一個是post請求一個是get請求。 

 

 

serverUrl默認在初始化富文本編輯器的時候會以get方式請求該地址,所以我們需要在該請求方法中返回它的默認配置文件。

redirect:/js/ueditor/jsp/config.json

 

 

toolbars設置常用富文本編輯器的工具,比如

'fullscreen', '|', 'undo', 'redo', '|','fontfamily', 'fontsize', '|','justifyleft', 'justifycenter', 'justifyright', 'justifyjustify','simpleupload'

 

 

4、經過第三步之后,uditor就找到了config.json配置文件。這時候就可以上傳圖片,但是還不能回顯圖片,因為上傳圖片

成功后返回的數據格式不符合它的要求,回顯圖片還需要在config.json中配置獲取圖片的路徑參數

 

 

5、上傳圖片,以MultipartFile對象來接收圖片信息。經過上傳的邏輯之后,返回json字符串。格式如下:

  Map<String,Object> map = new HashMap<String,Object>() ;

map.put("state", "SUCCESS") ;

map.put("original", file.getOriginalFilename()) ;

map.put("size", file.getSize()) ;

map.put("title", file.getOriginalFilename()) ;

map.put("type", xxx) ; //圖片類型

map.put("url", fileName) ;

ObjectMapper mapper = new ObjectMapper(); 

  return mapper.writeValueAsString(map);

 

 

 

6、在onfig.json配置文件中設置獲取圖片的路徑,找到imageUrlPrefix參數,比如你的圖片上傳到static目錄的upload下,

http://192.168.0.105:8080/xxx/upload/

 

后面遇到配置serverUrl參數問題,該參數配置的服務地址,需與所訪問的服務網址保持一致,如果是用localhost訪問服務,但serverUrl配置的是本機IP,也會提示跨域問題。 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM