1. 程式人生 > >Struts2+Ueditor配置和圖片上傳

Struts2+Ueditor配置和圖片上傳

正文開始之前,我先說說沒什麼我要寫這篇文章,要知道在這之前我是從來不在網上寫文章的。這幾天正在做我們專業的網站(筆者是一個學生),裡面有新聞釋出的功能,於是就與Ueditor打上了交道。但是問題也隨之而來了,Ueditor圖片上傳不上去,編輯的圖片不能用。然後就在網上找資料,看到大量的資訊,很高興,按照以往的經驗,這麼多資訊應該有一個會解決問題,然而花費了一整天,把網上的所有回答都試了一遍還是沒有解決問題,很傷心,決定自己看原始碼自己解決,又花費了一天,傍晚的時候問題解決了。
正文開始:
專案結構:
這裡寫圖片描述

執行結果:
這裡寫圖片描述

  • 步驟二:
    解壓下載好的umeditor1_2_2-utf8-jsp
    在專案的根目錄下新建資料夾:ueditor
    複製
    這裡寫圖片描述


    貼上到剛新建的ueditor檔案目錄下

  • 步驟三:
    把ueditor/jsp下的兩個jar包複製到根目錄下WEB-INF/lib下
    這裡寫圖片描述

  • 步驟四:
    在根目錄下新建jsp頁面,把ueditor目錄下的index.html複製到剛新建的頁面中,並修改js和css路徑
    這裡寫圖片描述
    說明:ueditor.css檔案是我把index.html頁面裡的css樣式分離出來了

  • 步驟五:
    執行就可以看見已經配置好了,可以編輯文字了,但是還不能上傳圖片

  • 步驟六:
    在ueditor目錄下新建upload/image資料夾,用來儲存上傳的圖片

  • 步驟七:
    把ueditor目錄下jsp下的的Uploader.jar複製到java檔案包底下
    這裡寫圖片描述

  • 步驟八:
    修改jsp檔案下imageUp.jsp檔案
    這裡寫圖片描述
    以及
    這裡寫圖片描述
    說明:up.setSavePath()採用的是相對路徑;設定圖片儲存路徑為ueditor目錄下的upload下的image

  • 步驟九:
    修改ueditor目錄下umeditor.config.js檔案
    這裡寫圖片描述
    說明:imagePath是設定你的頁面顯示上傳的圖片的路徑,如果設定錯誤,圖片可以上傳成功,但是在頁面顯示不出來。雙引號裡面的配置路徑是為了補全根路徑與imageUp.jsp的up.setSavePath()路徑之間的卻失部分,這兩個路徑的配置相互影響

  • 步驟十:
    建立自己的攔截器(相當於一個過濾器)
    這裡寫圖片描述
    說明:由於Struts2預設使用Apache的Commons FileUpload元件和內建的FileUploadInterceptor攔截器實現檔案上傳,它會將request中的檔案域封裝到action中的一個File型別的屬性中,並刪除request中的原有檔案域,因此直接使用UEditor的imageUp.jsp上傳檔案會失敗

  • 步驟十一:
    修改web.xml配置,採用自定義的攔截器
    這裡寫圖片描述
    到此,上傳圖片就完成了。