SpringBoot+editormd圖片上傳
阿新 • • 發佈:2019-01-09
- 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}