MARKDOWN上传图片的基本实现

2022-12-27 568

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： MARKDOWN上传图片的基本实现

前言

“ 前面的文章，我们已经知道了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;////提示信息 //一般上传失败后返回
}