0
点赞
收藏
分享

微信扫一扫

editormd图片编辑( 结合SpringBoot 实现)

崭新的韭菜 2022-03-23 阅读 60
java

1、引言

2、editormd部分

在初始化编辑器的时候开启图片上传功能

  • imageUpload : 取值为true
  • imageFormats : 支持的图片格式
  • imageUploadURL : 处理上传图片的请求url
/*--------初始化markdown编辑器---------*/  
contentEditor = editormd("m-editormd", {
	placeholder: '开始编辑...',
	width: '100%',
	height: 700,
	emoji: true,
	syncScrolling: "single",
	path: "../../static/lib/editormd/lib/"
	imageUpload: true,
	imageFormats: ["jpg", "jpeg", "png"],
	imageUploadURL: "http://127.0.0.1:8080/admin/editormd/images"
})

3、SpringBoot部分

3.1 封装返回实体

editormd建议返回一个json数据,包括success(是否处理成功),message(提示信息),url(处理成功后图片的相对路径)

public class EditorJson {
    /**
     * editormd上传图片返回的json数据
     */
    private int success;  // 后端是否处理成功 1成功 0失败
    private String message; // 提示信息
    private String url; // 成功后的url地址(图片存储在服务器的地址,相对路径)
}
3.2 处理请求
 @PostMapping("/editormd/images")
 @ResponseBody
 public EditorJson imagesHandler(@RequestParam("editormd-image-file") MultipartFile file) {
        EditorJson result = new EditorJson();
        try {
        	// 自定义工具类, 结果为null或''表示处理失败;反之表示处理成功,返回文件在服务器中存储的文件名
            String accessDir = UploadUtils.uploadPictureHandler(file);
            if (accessDir == null || Objects.equals("", accessDir)) {
                result.setSuccess(0);
                result.setMessage("错误 : 只支持5MB的jpg,jpeg,png格式的图片");
            } else {
                result.setSuccess(1);
                result.setMessage("upload success");
                // "/res/images/" 设置了静态资源访问路径,读者根据自己的实际情况设置
                result.setUrl("/res/images/" + accessDir);
            }
        } catch (Exception e) {
            throw new UniversalException("图片上传失败,格式或大小错误");
        }
        return result;
    }

注:
1、请求参数需设置为 editormd-image-file
2、UploadUtils类是我自己封装的一个处理文件上传的工具类,其实质就是SpringBoot处理文件上传那一系列步骤,由读者自己实现,或者搜索其他博客

4、效果图

上传成功后会显示图片路径,并显示图片
在这里插入图片描述
在这里插入图片描述

如果在这个过程中有什么问题,欢迎留言交流

举报

相关推荐

0 条评论