UEditor SpringMVC 圖片上傳 & 表單提交

1.顯示圖片插件

toolbars: [
    ['bold','simpleupload', 'insertimage', 'insertvideo','justifyleft','justifyright','justifycenter','link','insertimage','inserthtml','fullscreen']
],

toolbars中加入 'simpleupload', 'insertimage' 便可以顯示 單張上傳與多圖上傳標籤

2.初始化配置

在步驟1中，顯示出來這個時候單張上傳應該是灰化的而且多張上傳會出現：後端配置項沒有正常加載，上傳插件不能正常使用！

顯示以下：

3.請求config.json文件

不要着急，這是由於初始化的時候UE會根據 ueditor.config.js 這個文件中的統一請求入口

// 服務器統一請求接口路徑
 serverUrl: URL + "jsp/controller.jsp"

去請求 ueditor/jsp/config.json 這個文件，在srpingmvc裏面樓主這邊過濾了jsp直接請求，因此將這個請求入口改成對應的@controller

// 服務器統一請求接口路徑
 serverUrl: "/gearset/upload/ueditor"

後臺@controller 代碼：

/*這裏將百度的源碼下了下來主要是爲了看究竟是怎麼去請求config.json文件的，讀取的是哪一個路徑*/
    import com.baidu.ueditor.ActionEnter;
    
    @RequestMapping(value = "ueditor", method = RequestMethod.GET)
    public @ResponseBody String ueUpload(HttpServletRequest request, HttpServletResponse response) throws IllegalStateException, IOException {
        //這裏就是把controller.jsp代碼copy下來
        request.setCharacterEncoding( "utf-8" );
        response.setHeader("Content-Type" , "text/html");
        String roolPath = request.getSession().getServletContext().getRealPath("/");
        String configStr = new ActionEnter(request, roolPath).exec();
        return configStr;
    }

經過上面的代碼跟蹤發現 他這裏面讀取的是 請求入口的上一層目錄（例：樓主這邊統一請求入口爲 serverUrl: "/gearset/upload/ueditor" 因此它就去 /gearset/upload/ 下面找 config.json 文件 ，因此config.json必定要放對位置）

最後再說一句，若是出現 後端配置項沒有正常加載，上傳插件不能正常使用！ ，不用懷疑必定必定必定是config.json文件沒有取到，或者是請求超時！

4.圖片上傳入口配置

若是上面幾個步驟順利作完的話，恭喜你，你已經完成了40%，接下來咱們須要作的就是怎麼將圖片上傳到咱們的服務器文件夾

與初始化中請求config.json 文件同樣UE會有一個默認的請求參數，若是你不去動他，他將會是默認的 serverUrl+config.json中的圖片上傳imageActionName

*舉例：咱們上面已經將 serverUrl改掉了 因此這裏是 : "/gearset/upload/ueditor"
再看config.json 文件中 imageActionName ：uploadimage,連起來就是 **/gearset/upload/ueditor?action=uploadimage***

顯然這樣的請求路徑不是咱們想要的，咱們須要將它改寫下，那麼怎麼作呢，經過看UE的文檔能夠改寫這個請求路徑

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;  
UE.Editor.prototype.getActionUrl = function(action) {  
      if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {  
          return '/gearset/upload/ue/cms.article';  
      } else {  
          return this._bkGetActionUrl.call(this, action);  
      }  
}

大意就是若是action爲uploadimage 就轉而請求 /gearset/upload/ue/cms.article，也就是咱們SpringMVC對應的@Controller

5.圖片上傳代碼

/**
     * 上傳圖片
     * 
     * @param request
     * @param response
     * @param appPath
     * @return
     * @throws IllegalStateException
     * @throws IOException
     * @throws FileUploadException
     */
    @RequestMapping(value = "ue/{appPath:.*}", method = RequestMethod.POST)
    public @ResponseBody Map<String, Object> ueUpload(HttpServletRequest request, HttpServletResponse response,
            @PathVariable String appPath) throws IllegalStateException, IOException,
            FileUploadException {

        Map<String, Object> m = new HashMap<String, Object>();
        // 對上傳文件夾和臨時文件夾進行初始化
        String rootDir = configInfo.getUploadDir();

        String tmpDir = rootDir + "/tmp";
        File tmpDirPath = new File(tmpDir);

        if (ServletFileUpload.isMultipartContent(request)) {
            request.setCharacterEncoding("utf-8");


            DiskFileItemFactory dff = new DiskFileItemFactory();// 建立該對象
            dff.setRepository(tmpDirPath);// 指定上傳文件的臨時目錄
            dff.setSizeThreshold(2 * 1024 * 1024);// 指定在內存中緩存數據大小,單位爲byte
            ServletFileUpload sfu = new ServletFileUpload(dff);// 建立該對象
            sfu.setFileSizeMax(1000000000);// 指定單個上傳文件的最大尺寸
            sfu.setSizeMax(1000000000);// 指定一次上傳多個文件的總尺寸
            FileItemIterator fii = sfu.getItemIterator(request);// 解析request
            // 請求,並返回FileItemIterator集合
            while (fii.hasNext()) {
                FileItemStream fis = fii.next();// 從集合中得到一個文件流
                if (!fis.isFormField() && fis.getName().length() > 0) {// 過濾掉表單中非文件域

                    String filename = fis.getName();

                    String[] FileName = filename.split("\\.");

                    String preFile = FileName[0];
                    String endFile = FileName[1];


                    Date date = new Date();
                    SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
                    String nowdate = sdf.format(date);


                    String newFileName = preFile + "_" + nowdate + "." + endFile;
                    
                    appPath = appPath.trim().replaceAll("\\.", "/");

                    File appDir = new File(rootDir + "/" + appPath);
                    if (!appDir.isDirectory()) {

                        appDir.mkdir();
                    }
                    // 建立按月分類的子文件夾
                    String currentMonth = new DateUnit().getTheFormatDate(new Date(), "yyyyMM");
                    File appSubDir = new File(appDir + "/" + currentMonth);
                    if (!appSubDir.isDirectory()) {
                        appSubDir.mkdir();
                    }

                    String newFilepath = appSubDir + "/" + newFileName;

                    BufferedInputStream in = new BufferedInputStream(fis.openStream());// 得到文件輸入流
                    BufferedOutputStream out =
                            new BufferedOutputStream(new FileOutputStream(new File(newFilepath)));// 得到文件輸出流
                    Streams.copy(in, out, true);// 開始把文件寫到你指定的上傳文件夾
                    m.put("path", appPath + "/" + currentMonth + "/");
                    m.put("filename", newFileName);
                    
                    m.put("original", filename);
                    m.put("name", newFileName);
                    m.put("url", appPath + "/" + currentMonth + "/"+newFileName);
                    m.put("state", "SUCCESS");
                    m.put("type", ".jpg");
                    m.put("size", "99697");

                }
            }
        }

        return m;
    }

關於圖片上傳的代碼不作過多闡述，網上一搜一堆，這裏主要是map返回的json對象應當包含可選參數url、state、size、type等字段

6.提取UE中img標籤 & 結合表單提交

無非就是將圖片的path、name等屬性提取出來封裝到form表單的參數中提交

/*description:取出ueditor裏面的圖片
             *author:shu.fangjian 
             *date:2016-12-02 
             * */
            
            var root = UE.htmlparser(UE.getEditor('articleContent').getContent(),true);
            var imgs = new Array();
            imgs = root.getNodesByTagName('img');
            
            var ueImg ={};
            for(var i=0;i<imgs.length;i++){
                console.log(imgs[i].getAttr('src'));
                if(!portal.utils.isEmpty(imgs[i].getAttr('alt'))){
                    var url = imgs[i].getAttr('src');
                    var urlArray = imgs[i].getAttr('src').split("/");
                    if(portal.utils.isEmpty(ueImg.oriName)){
                        ueImg.oriName = imgs[i].getAttr('alt');
                        ueImg.newName = urlArray[urlArray.length-1];
                        ueImg.filePath = urlArray[3] +"/"+urlArray[4]+"/";
                    }else{
                        ueImg.oriName += ","+imgs[i].getAttr('alt') ;
                        ueImg.newName += ","+urlArray[urlArray.length-1] ;
                        ueImg.filePath += ","+urlArray[3] +"/"+urlArray[4]+"/";
                    }
                    
                }
                
            }
            /*end*/

最後將ueImg裏面的放到你的表單數據裏面提交。

歡迎指正 499260459@qq .com

That's End!