springboot+wangEditor圖片上傳

風一樣的男人_發表於2018-07-29

異常:圖片能上傳但不能回顯到前端編輯器中!!!

解決:利用ssm(spring) 實現圖片上傳,可以輕鬆回顯到前端,但springboot預設是內建tomcat,該將圖片上傳到哪裡呢?

          將ssm中圖片上傳的程式碼用到springboot專案中依然不行,網上的都不可行!

          後來才知道在springboot中不是將專案上傳到webroot下面,也不是上傳到快取中,而是上傳到執行資源中,也就是target目錄中的static的某個資料夾中,而不是原始碼static的某個檔案中,那麼怎麼獲取到執行狀態(編譯狀態)staitc檔案目錄呢?     通過這行程式碼:

                  String path= Class.class.getClass().getResource("/").getPath();
                  path= path+"static"+File.separator+"uploadfiles";

這樣就能指定到執行目錄根目錄+static+uploadfiles資料夾,然後其他的圖片上傳操作基本不變即可(同ssm模式基本一致),下面附上程式碼:

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

/*
 * 上傳圖片
 */
@RequestMapping(value = "/upload1.html", produces = {"text/html;charset=UTF-8"},method=RequestMethod.POST)
@ResponseBody
public Object uploadReportFile(@RequestParam(value = "myFileName", required = false) MultipartFile cardFile,
                     HttpServletRequest request,HttpSession session) {
    String path= Class.class.getClass().getResource("/").getPath();
    path= path+"static"+File.separator+"uploadfiles";


    Map<String, String> map = new HashMap<String, String>();
    String jo="";
    if(cardFile != null){
        String oldFileName = cardFile.getOriginalFilename();

        String prefix=FilenameUtils.getExtension(oldFileName);

        if(cardFile.getSize() >  5000000){
            return "1";
        }else if(prefix.equalsIgnoreCase("jpg") || prefix.equalsIgnoreCase("png")
                || prefix.equalsIgnoreCase("jpeg") || prefix.equalsIgnoreCase("pneg")){
            String fileName = System.currentTimeMillis()+RandomUtils.nextInt(1000000)+"_IDcard.jpg";
            File targetFile = new File(path, fileName);
            // 檢測是否存在目錄
            if (!targetFile.getParentFile().exists()) {
                targetFile.getParentFile().mkdirs();
            }

            try {

                cardFile.transferTo(targetFile);
            } catch (Exception e) {
                e.printStackTrace();
            }

            String url =request.getContextPath()+"/static/uploadfiles/"+fileName;
         map.put("data", url);
            jo = JSONArray.toJSONString(map);
            return jo;
        }else{
            return "2";
        }
    }

    return null;
}

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

前臺js初始化wangEditor, 並將後臺的傳送過來的url插入到:

//初始化編輯器
var E = window.wangEditor;
var editor = new E('#editor');
editor.customConfig.showLinkImg = false;
editor.customConfig.uploadFileName = 'myFileName';
editor.customConfig.uploadImgServer = '/upload1.html';
editor.customConfig.uploadImgHooks = {
    customInsert: function (insertImg, result, editor) {
        var url =result.data;
        insertImg(url);
    }
};
editor.create();

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

其他wangEditor異常處理:

//獲取content.並將所有的多餘空格去除
var text=$("#contentVal").val().replace(/\s+/g, "");
text=text.replace("imgsrc", "img src");
//將轉義符反譯為html
// var htmltext=HTMLDecode(text);
editor.txt.html(text);
ReportInfoDlg.editor = editor;

相關文章