springboot+wangEditor圖片上傳
異常:圖片能上傳但不能回顯到前端編輯器中!!!
解決:利用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;
相關文章
- Retrofit+RxJava上傳圖片上傳圖片到後臺RxJava
- 【easyui 】上傳圖片UI
- 上傳圖片jsJS
- 圖片上傳及圖片處理
- php圖片上傳之圖片轉換PHP
- java,springboot + thymeleaf 上傳圖片、刪除圖片到伺服器、本地,壓縮圖片上傳(有些圖片會失真),原圖上傳JavaSpring Boot伺服器
- 多圖片formpost上傳ORM
- input file圖片上傳
- PHP上傳圖片類PHP
- 圖片檔案上傳
- vue 上傳圖片進行壓縮圖片Vue
- Ueditor 上傳圖片自動新增水印(只能上傳圖片,上傳檔案報錯)
- 學姐,影片上傳不了,我上傳了圖片
- Laravel 使用 FastDFS 上傳圖片LaravelAST
- koa 圖片上傳詳解
- Vue圖片裁剪上傳元件Vue元件
- 圖片上傳方案詳解
- js上傳圖片壓縮JS
- vue圖片預覽上傳Vue
- Typora上傳圖片設定
- laravel 上傳附件-不是圖片--Laravel
- js圖片上傳預覽JS
- curl上傳圖片的大坑
- 微信小程式 圖片上傳微信小程式
- input file美化 --上傳圖片
- laravel上傳圖片報錯Laravel
- PHP配置CKEditor上傳圖片PHP
- spring boot 圖片上傳Spring Boot
- vue 實現貼上上傳圖片Vue
- 自定義上傳圖片拼圖遊戲遊戲
- 菜鳥學JS(一)——上傳圖片之上傳前預覽圖片JS
- 圖片上傳5-多個圖片上傳,獨立專案Demo和原始碼原始碼
- formData原生實現圖片上傳ORM
- .Net之Layui多圖片上傳UI
- ci框架中的圖片上傳框架
- 圖片上傳知識點梳理
- 前端圖片壓縮及上傳前端
- CSDN上傳圖片對水印操作