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

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

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中设置了资源放行，图片成功显示 。