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}

SpringBoot+editormd图片上传

猜你喜欢