百度UEditor上傳圖片-再再總結一次

阿新 • • 發佈：2019-01-11

本週，CSDN有個網友遇到了百度UEditor上傳問題，最後商定付50元錢，我幫他解決這個問題。
他最初想自己搞定這個問題，結果搞了好多次，好幾天，還是沒能解決。
2015年1月17日8：25~2015年1月18日00：24，4個小時終於搞定了這個問題。

1.總的感悟
本來預計1個小時，就能解決的，結果硬是花費了4個小時，挺無奈的。雖說是幫客戶解決一個問題，但實際上一個問題相關的問題，非常多。另外，就是解決這個問題，不是普通的諮詢，已經參與到寫程式碼、單步跟蹤、QQ語音、QQ遠端協助了。
最讓人鬱悶的是，遠端協助，非常卡，太難受了。一個操作，要等好幾秒，客戶的網路不給力，難道是QQ的服務不行麼。

2.解決百度UEditor圖片上傳的諸多問題和周邊問題

2.1 config.json找不到。
找不到，就是UEditor根據url，在某個目錄下，沒有找到config.json檔案。
解決這個問題，需要下載UEditor的java原始碼，看看怎麼獲得config檔案的。

百度UEditor比較坑的地方是，根據URL獲得config檔案，然後圖片儲存的位置竟然也是根據這個url來獲得的。也就是說，配置檔案中的url有2個作用，不是單一的。

2.2概念混淆。
這個客戶還沒有畢業，剛剛實習，感覺經驗很欠缺。
百度UEditor的JS和JSP請求，它們是2套不同的響應規則。一個是靜態資源，另外一個是動態請求。

2.3config.json可以放到webapp專案的外面，比如C://。

這個時候，需要手動修改rootPath。

2.4UEditor的config.js中的獲得config.json的url，可以是個JSP，也可以是.action等動態請求。
官網的預設例子是，JSP的，它假定了模版用的是JSP，而不是Freemarker。
而實際專案中，可能用的是Freemarker，這個時候，也需要配置JSP的檢視解析器。

2.5通過寫Controller，用動態請求獲得config.json這個檔案，最終圖片上傳失敗。
提示stream為null。
這個問題，之前總結過了，我們在專案中配置了Sprring上傳大小。
spring的上傳和百度UEditor的上傳，起了衝突，導致檔案找不到。

2.6放棄動態請求響應，而使用JSP方式響應。

提示找不到controller.jsp，路徑明明是正確的。
最後，和自己的本地進行對比，排除了很多情況，才找到原因。

springMVC的url-pattern /和/*的區別網上有這樣的回答< url-pattern > / </ url-pattern > 不會匹配到*.jsp，不會進入spring的DispatcherServlet類 < url-pattern > /* </ url-pattern > 會匹配*.jsp，導致進入spring的DispatcherServlet 類，然後去尋找controller，接著找不到對應的controller所以報錯這讓我很有疑問，如果/不會匹配到*.jsp，那麼是不是*.jpg之類的靜態檔案也不會匹配到（不進入DispatcherServlet），但是事實上要訪問靜態檔案還要加<mvc:resources location="/img/" mapping="/img/**"/>來避開匹配
參考：http://zhidao.baidu.com/link?url=jI3AOESn67AVpalSb7kG0ZUJ37hjeSPyW024VL4mK2YoGtv2IBFU7VUemQM85PLnv0dhVdcL82roCBAC0ggAwb5_izsc91w4MkuScIvK3hu

客戶配的是/*，SpringMVC攔截了JSP請求，但作為Action響應，找不到就404了，最後改成/。

2.7圖片上傳成功了，但是無法回顯。
UEditor後端儲存圖片到目標位置之後，返回前端一個url。前端根據url，去取圖片，取不到。
圖片儲存在專案的外面，比如C：/img，前端請求不可能直接訪問到，需要做對映。

2.8做了對映，圖片仍然找不到。
後端回顯的url，不帶工程名，比如是/imgs/a.jpg。
但是前端正常訪問需要帶專案名稱，比如ssh。
一種解決辦法是，在後端獲得url之後，或者前端獲得url時，手動加上專案名稱，使得圖片的url有專案名稱，比如
http://a.com/ssh/img/a.jpg。

另外一種辦法，是為了方便，直接把Tomcat部署到根目錄下，訪問路徑不帶專案名稱，這樣就避免了上述問題。

2.9Eclipse中部署Tomcat到根目錄，需要手動修改Context Path。
正解：右鍵單擊專案名稱 --> Properties --> Web Project Settings --> 把 “Context root” 改成 “/”
非正解：右鍵點選專案名--Properties--Tomcat--General，將Context name框中值修改為：/
不同網友給出的答案不一樣，可能會版本之類的因素有關係。
參考資料： http://blog.snsgou.com/post-593.html
http://blog.csdn.net/sasoritattoo/article/details/22790297 ;

2.10單個圖片上傳成功之後，多個圖片無法上傳。
根據瀏覽器控制檯，發現是CSS找不到。
這個問題，最終沒有親自去解決，告訴了客戶原因，讓他自己去分析並解決。
因為最麻煩的單個圖片上傳的整個邏輯、全部流程debug、所有問題都解決了。

3.其它一些感受
掙點外快很難啊，一方面是一般人不願意付費，另一方面別人願意付費的時候，多是比較棘手的問題。100元錢，覺得太多。
說實話，如果只是從掙錢的角度，絕對是划不來的。因為很多客戶的問題，都是相對麻煩的，而且你沒有上下文環境，通過遠端debug，解決問題的效率比較低，遠遠沒有本地除錯方便。另外，找你幫忙解決問題的客戶，多是水平和經驗不如你的人，交流起來比較困難，經驗完全不對等，你說的話，客戶理解比較慢。

之所以，堅持做這種事，是因為可以獲得金錢之外的好處，比如提升自己解決問題的能力，接觸更多的人，也可以提高自己的影響力。說不定，還有機會結識幾個好友。

百度UEditor上傳圖片-再再總結一次

百度UEditor上傳圖片-再再總結一次

Spring Boot專案百度UEditor上傳圖片

20150129 百度Ueditor 上傳本地圖片失敗的處理

百度WebUploader上傳圖片，圖片回顯編輯，查看

百度UEditor呼叫單圖片上傳功能的解決方法

織夢DEDECMS百度編輯器Ueditor上傳圖片及下載遠端圖片無法加水印的解決方法

百度編輯器ueditor上傳圖片失敗問題

真正解決百度編輯器UEditor上傳圖片跨域問題

實現：上傳圖片後再把圖片顯示到頁面上去

UEditor上傳圖片到七牛C#（後端實現）

ueditor上傳圖片

使用Ueditor上傳圖片到圖片服務器（二）

百度Ueditor設置圖片自動壓縮

UEditor 上傳圖片等比例縮放

ueditor上傳圖片不好用，訪問ueditor中的controller.js變成下載檔案

nginx下ueditor上傳圖片502

關於Ueditor上傳圖片到專案之外的目錄

SpringBoot+Thymeleaf 整合 Ueditor 上傳圖片

UEditor上傳圖片與spring mvc上傳圖片衝突問題。

富文字編輯器 UEditor上傳圖片（好用版）

百度UEditor上傳圖片-再再總結一次

相關推薦