詳解springboot整合ueditor踩過(guò)的坑
有一天老板突然找我讓我改富文本(一臉懵逼,不過(guò)也不能推啊默默地接下了),大家都知道現(xiàn)在的富文本視頻功能都是只有上傳鏈接的沒(méi)有從本地上傳這一說(shuō)(就連現(xiàn)在的csdn的也是)于是我找了好多個(gè),最終發(fā)現(xiàn)百度的ueditor可以。
經(jīng)過(guò)幾天的日夜,甚至犧牲了周末休息時(shí)間開(kāi)始翻閱資料。。。
廢話不多說(shuō),開(kāi)始教程:
第一步:
去ue官網(wǎng)下載他的源碼
第二步:
解壓下載的源碼(下載可能會(huì)慢,好像需要翻墻下載)
然后打開(kāi)項(xiàng)目把源碼拖進(jìn)項(xiàng)目的resources/static中去
第三步
就是重點(diǎn)了
由于springboot現(xiàn)在默認(rèn)是不支持jsp的所以jap下的controller.jsp 運(yùn)行后springboot是找不到路徑的,就會(huì)出現(xiàn)富文本存在,而上傳圖片或者視頻的地方會(huì)顯示(后端未配置)
這里要說(shuō)下:下面就你就要把源碼里面的jsp下有4個(gè)jar包,你需要復(fù)制到項(xiàng)目中然后add進(jìn)去,或者你找maven地址也可,但是不建議因?yàn)槔速M(fèi)時(shí)間。
第四步:由于無(wú)法獲取地址,那么我們就自己寫(xiě)一個(gè)controller進(jìn)行映射,怕大家懶,我這里拷貝我的提供使用
@RestController @RequestMapping("/Test") public class UeTestController { /** * 上傳配置:即不走config.json,模擬config.json里的內(nèi)容,解決后端配置項(xiàng)不正確,無(wú)法上傳的問(wèn)題 * @return */ @RequestMapping(value = "/ueditor/config",method = RequestMethod.GET) @ResponseBody public String uploadConfig(String action,String noCache) { //注意以下:imageActionName 根據(jù)這個(gè)ActionName的名字來(lái)上傳接口:比如我現(xiàn)在設(shè)置的上傳文件接口為下面那個(gè):multipleCarouselFiles //imageUrlPrefix:是【點(diǎn)擊確認(rèn)之后,加載的資源路徑】所屬服務(wù)器中獲取資源 System.out.println("進(jìn)入config===================="); System.out.println("action="+action+" callback="+noCache); String s = "{\n" + " \"basePath\": \"C:/\",\n" + " \"imageActionName\": \"/Test/multipleCarouselFiles\",\n" + " \"imageFieldName\": \"upfile\", \n" + " \"imageMaxSize\": 2048000, \n" + " \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], \n" + " \"imageCompressEnable\": true, \n" + " \"imageCompressBorder\": 1600, \n" + " \"imageInsertAlign\": \"none\", \n" + " \"imageUrlPrefix\": \"http://localhost:8082/images/upload\",\n" + " \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上傳視頻配置 */\n" + " \"videoActionName\": \"/Test/multipleCarouselFiles\", /* 執(zhí)行上傳視頻的action名稱 */\n" + " \"videoFieldName\": \"upfile\", /* 提交的視頻表單名稱 */\n" + " \"videoPathFormat\": \"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */\n" + " \"videoUrlPrefix\": \"http://localhost:8082/images/upload\", /* 視頻訪問(wèn)路徑前綴 */\n" + " \"videoMaxSize\": 102400000, /* 上傳大小限制,單位B,默認(rèn)100MB */\n" + " \"videoAllowFiles\": [\n" + " \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" + " \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"]/* 上傳視頻格式顯示 */ }"; return s; } /** * Ueditor上傳文件 * 這里以上傳圖片為例,圖片上傳后,imgPath將存儲(chǔ)圖片的保存路徑,返回到編輯器中做展示 * @param file * @return */ @RequestMapping(value = "/multipleCarouselFiles",method = RequestMethod.POST) @ResponseBody public String uploadimage(@RequestParam("upfile") MultipartFile file, HttpServletRequest request, HttpServletResponse response) { //服務(wù)協(xié)議 String Scheme =request.getScheme(); //服務(wù)器名稱 String ServerName= request.getServerName(); //服務(wù)器端口 int Port= request.getServerPort(); String url=Scheme+"://"+ServerName+":"+Port; Results results=new Results(); //判斷非空 if (file.isEmpty()) { return "上傳的文件不能為空"; } try { //1、先獲取jar所在同級(jí)目錄 File path = new File(ResourceUtils.getURL("classpath:").getPath()); if(!path.exists()){ path = new File(""); } System.out.println("獲取jar所在同級(jí)目錄 path:"+path.getAbsolutePath()); //2、如果上傳目錄為/static/images/upload/,則可以如下獲?。? File upload = new File(path.getAbsolutePath(),"static/images/upload/New_img/"); if(!upload.exists()){ upload.mkdirs(); } System.out.println("上傳目錄為/static/images/upload/中---upload url:"+upload.getAbsolutePath()); //測(cè)試MultipartFile接口的各個(gè)方法 System.out.println("[文件類型ContentType] -:"+file.getContentType()); System.out.println("[文件組件名稱Name] -:"+file.getName()); System.out.println("[文件原名稱OriginalFileName] -:"+file.getOriginalFilename()); System.out.println("[文件大小] -:"+file.getSize()); System.out.println(this.getClass().getName()+"圖片路徑:"+upload); // 如果不存在該路徑就創(chuàng)建 String uploadPath=upload+"\\"; File dir = new File(uploadPath + file.getOriginalFilename()); // 文件寫(xiě)入 file.transferTo(dir); //在開(kāi)發(fā)測(cè)試模式時(shí),得到的地址為:{項(xiàng)目根目錄}/target/static/images/upload/ //在打包成jar正式發(fā)布時(shí),得到的地址為:{發(fā)布jar包目錄}/static/images/upload/ results.setMessage("上傳單個(gè)文件成功"); } catch (Exception e) { e.printStackTrace(); results.setMessage("上傳單個(gè)文件失敗"); } String result = ""; if(!file.isEmpty()) { String originalFileName = file.getOriginalFilename(); // 這里寫(xiě)你的文件上傳邏輯 // String imgPath = fileUtil.uploadImg(file); String imgPath = "/New_img/"+originalFileName; result = "{\n" + " \"state\": \"SUCCESS\",\n" + " \"url\": \"" + imgPath + "\",\n" + " \"title\": \"" + originalFileName + "\",\n" + " \"original\": \"" + originalFileName + "\"\n" + "}"; } return result; } }
下面附上一個(gè)老哥給我發(fā)的上傳文件用的一個(gè)類Results
import com.fasterxml.jackson.annotation.JsonProperty; /* * ueditor 使用類 * */ public class Results { private Object Data; private String Message; private boolean Status; @Override public String toString() { return "Results{" + "Data=" + Data + ", Message='" + Message + '\'' + ", Status=" + Status + '}'; } @JsonProperty("Data") public Object getData() { return Data; } public void setData(Object data) { Data = data; } @JsonProperty("Message") public String getMessage() { return Message; } public void setMessage(String message) { Message = message; } @JsonProperty("Status") public boolean isStatus() { return Status; } public void setStatus(boolean status) { Status = status; } }
下面就要修改ueditor中最重要的映射地址位置(ueditor.config.js)也就是說(shuō)他為什么能加載你寫(xiě)的testcontroller就是這個(gè)地方在起作用(附圖):
如果你從上面跟我路徑一直,可以直接復(fù)制我的地址
此時(shí)你在運(yùn)行項(xiàng)目就會(huì)進(jìn)入自己寫(xiě)的controller
上面其實(shí)我都一步寫(xiě)好了,其實(shí)在我做的過(guò)程中還遇到了
(圖是我找的,但是問(wèn)題一模一樣),具體什么原因就是因?yàn)闆](méi)有配置好圖片上傳的路徑
說(shuō)到這我要提一下你引入富文本的地方,需要做一個(gè)這個(gè)配置
其他位置不要?jiǎng)泳涂梢?,到這夠詳細(xì)吧,做這個(gè)真是做的我腦袋都大了,好在有一個(gè)老哥幫了我一把,非常感謝,還有什么問(wèn)題留言就可,看到就會(huì)回
到此這篇關(guān)于詳解springboot整合ueditor踩過(guò)的坑的文章就介紹到這了,更多相關(guān)springboot整合ueditor內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JVM?jstack實(shí)戰(zhàn)之死鎖問(wèn)題詳解
如果在生產(chǎn)環(huán)境發(fā)生了死鎖,我們將看到的是部署的程序沒(méi)有任何反應(yīng)了,這個(gè)時(shí)候我們可以借助?jstack進(jìn)行分析,下面我們實(shí)戰(zhàn)操作查找死鎖的原因2022-10-10

詳解關(guān)于IntelliJ IDEA中Schedule for Addition 的問(wèn)題

Springboot項(xiàng)目全局異常統(tǒng)一處理案例代碼

MyBatis-Plus使用sl4j日志打印SQL的代碼詳解

利用spring的攔截器自定義緩存的實(shí)現(xiàn)實(shí)例代碼