个人博客开发之editormd图片上传

上次集成到页面的编辑器只是一个简单的编辑器，今天写一下如何上传图片。
也是同样的思路找官方实例抄。不过后台代码得自己写
一、在添加编辑器的页面当中的js中添加图片上传

<script type="text/javascript">
    var testEditor;
    testEditor = editormd("my-editormd", {
        placeholder:'本编辑器支持Markdown编辑，左边编写，右边预览',  //默认显示的文字，这里就不解释了
        width: "90%",
        height: 640,
        syncScrolling: "single",
        path: "${pageContext.request.contextPath}/static/editormd/lib/",   //你的path路径（原资源文件中lib包在我们项目中所放的位置）
        theme: "dark",//工具栏主题
        previewTheme: "dark",//预览主题
        editorTheme: "pastel-on-dark",//编辑主题
        saveHTMLToTextarea: true,
        emoji: true,
        taskList: true,
        tocm: true,         // Using [TOCM]
        tex: true,                   // 开启科学公式TeX语言支持，默认关闭
        flowChart : true,             // 开启流程图支持，默认关闭
        sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
        toolbarIcons : function() {  //自定义工具栏，后面有详细介绍
            return editormd.toolbarModes['full']; // full, simple, mini
        },

        imageUpload : true,
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL : "${pageContext.request.contextPath}/editormdPic",
        onload: function () {

        }
    });

</script>

imageUploadURL这个填写的是你图片上传服务器路径，也就是controller中@RequestMapping()中的路径
editormd要求上传成功后返回json

 /*
    上传的后台只需要返回一个 JSON 数据，结构如下：
  {
                        success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
                        message : "提示的信息，上传成功或上传失败及错误信息等。",
                        url     : "图片地址"        // 上传成功时才返回
                     }
                     */

二、编写后台代码，我这里使用的是ssm
controller

 @RequestMapping("/editormdPic")
    @ResponseBody
    public JSONObject editormdPic (@RequestParam(value = "editormd-image-file", required = true) MultipartFile file,
                                   HttpServletRequest request,
                                   HttpServletResponse response) throws Exception{

        String trueFileName = file.getOriginalFilename();

        String suffix = trueFileName.substring(trueFileName.lastIndexOf("."));

        String fileName = UUID.randomUUID().toString().replace("-","")+suffix;

        String path = request.getSession().getServletContext().getRealPath("upload");


        File targetFile = new File(path, fileName);
        if(!targetFile.exists()){
            targetFile.mkdirs();
        }

        //保存
        try {
            file.transferTo(targetFile);
        } catch (Exception e) {
            e.printStackTrace();
        }


        JSONObject res = new JSONObject();
        //这就是返回给页面的json数据
        res.put("url",request.getContextPath()+"/upload/"+fileName);
        res.put("success", 1);
        res.put("message", "upload success!");

        return res;

    }

在这里我说一下过程中我遇到的问题，就是图片上传成功后， 返回了图片路径，但在预览视图里面却不显示图片。随后我查看了页面源代码，

其实预览视图里就是一个img标签，既然无法显示，肯定是路径问题，然后看了一下network，返现图片加载是404，我一下反应过来了，这上传上去的图片其实也是一种静态资源，要设置资源放行才可以，随后在springmvc中设置了资源放行，图片成功显示 。