前言
“ 前面的文章，我们已经知道了MarkDown的集成工作，那么接下来我们来看一下我们怎么应用这个工具来上传我们的图片的操作。”
今天是利用这个工具来上传我们的编辑的数据中，并且正确的展示在我们的个人编写的博客中。
正文
初始化Markdown编辑器
var editor = editormd("test-editor", { // width : "100%", height: 250, path: "editormd/lib/", saveHTMLToTextarea: true,//这个配置，方便post提交表单，表单字段会自动加上一个字段content-html-code,形式为html格式 /**上传图片相关配置如下*/ imageUpload: true, imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL: "/blog/v1/file/uploadImageForMd",//注意你后端的上传图片服务地址 });
由上面可知，咱们的上传图片的地址和类型。
编写Java后台上传图片的接口
第二步是编写我们Java后台编写文件的上传接口，让我们的图片可以上传到我们的图片服务器。
@AccessLimit(isLogIn = false) @PostMapping("/uploadImageForMd") @ResponseBody public Object uploadImageForMd(@RequestParam(value = "editormd-image-file", required = true)MultipartFile file, HttpServletRequest request) throws Exception { System.out.println(file.getContentType()); System.out.println(file.getOriginalFilename()); String name = UUID.randomUUID().toString() + file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."), file.getOriginalFilename().length()); boolean b = iftpServer.uploadFile("", name, file.getInputStream()); ResultForImageUploadMd result=new ResultForImageUploadMd(); if (b) { result.setSuccess(1); result.setUrl(InitConstants.PICTURE_PREFIX + name); result.setMessage("上传成功"); return result; } else { result.setSuccess(0); result.setMessage("上传失败"); return result; } }
上面的代码是我写的上传文件的代码，可以上传任何类型的图片，当然，可以上传我们的图片。但是，与此同时，我们也要注意markdown要求的返回的json的数据的格式。
@Data public class ResultForImageUploadMd { private int success;//0表示成功，其它失败 private String message; private String url;////提示信息 //一般上传失败后返回 }
这样我们就可以回显我们上传文件的具体的路径。
上传图片的效果展示
上面已经说明了markdown上传文件的所需要的所有需求，接下来，我们看一下我们的操作效果。
到这里，我们已经完成了所有的操作，是不是非常的方便：
第一步：我们在前端集成我们的markdown的编辑器，初始化我们的上传的参数（这个时候，我们的markdown会自动的开启我们的上传图片的功能）。
第二步：编写我们上传的文件的后台接口，保证我们的文件能够成功的上传到我们的图片服务器上面。
第三步：测试。。。。
