1. 程式人生 > >SpringBoot+editormd圖片上傳

SpringBoot+editormd圖片上傳

  • html程式碼
<div class="form-group">
    <div id="my-editormd" style="z-index: 99999">
         <textarea id="my-editormd-markdown-doc" class="editormd-markdown-textarea" name="my-editormd-markdown-doc" style="display:none;"></textarea><!-- 注意:name屬性的值-->
         <textarea class="editormd-html-textarea" id="my-editormd-html-code" name="my-editormd-html-code" style="display:none;"></textarea>
    </div>
</div>
  • js程式碼
//載入編輯器
        editormd("my-editormd", {//注意1:這裡的就是html中的DIV的id屬性值
            width: "100%",
            height: 700,
            syncScrolling: "single",
            path: "${request.contextPath}/static/admin/lib/editor_md/lib/",//注意2:lib檔案存放的路徑
            saveHTMLToTextarea: true,//注意3:這個配置,方便post提交表單
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],//支援接收的圖片上傳的格式
            imageUploadURL : "${request.contextPath}/admin/saveContentImg",//後端圖片上傳的服務地址
        });
  • springboot程式碼
    @RequestMapping("/admin/saveContentImg")
    @ResponseBody
    //接收圖片的引數名需要為"editormd-image-file"
    public JSONObject saveImage(@RequestParam("editormd-image-file") MultipartFile file, HttpServletRequest request){
        JSONObject jsonObject = new JSONObject();
        ResultInfo resultInfo = articleService.saveImage(file,request);
        if (resultInfo.getResultCode()==0){
            jsonObject.put("success", 0);//圖片上傳失敗的資訊碼
            jsonObject.put("message", "upload error!");//資訊
        }
        else {
            jsonObject.put("url", resultInfo.getResultObj());//圖片回顯地址,即檔案存放地址,應為虛擬路徑
            jsonObject.put("success", 1);//圖片上傳成功的資訊碼
            jsonObject.put("message", "upload success!");//資訊
        }
        return jsonObject;
    }
  • editormd上傳圖片需要回顯,而springboot圖片儲存的路徑為物理路徑,需要將物理路徑對映為虛擬路徑,可在springboot配置檔案中配置
  mvc:
#  該語句說明了靜態資源滿足什麼樣的匹配條件,springboot才會處理靜態資源請求
#  該語句用來闡述http請求
    static-path-pattern: /static/**
  servlet:
#  檔案存放的實體地址
    multipart:
      location: /Users/zyp/Desktop/DaiMa/個人部落格/blog/upload/
#      該語句規定應該在何處查詢靜態資源,springboot在查詢靜態資源時會依次在下面的配置路徑中查詢
#      該語句用來描述靜態資源的存放位置
  resources:
    static-locations: classpath:static/,file:${spring.servlet.multipart.location}