bootstrap summernote富文本编辑器图片上传干货分享

个人技术网站欢迎关注

今天做后台的时候需要一个富文本编辑器组件,由于项目使用的是bootstrap,所以毫不犹豫的用上了summernote富文本编辑器。文档各大大牛已经整理出来了但是图片上传到服务器这块比较杂大部分都是说上传到服务器的图片格式是base64的，但是我使用base64接收的时候看了下控制台竟然是二进制上传、、、lol 上传方法白写了,至此在这里做个记录方便自己谨记和有需要的人使用

第一步加载富文本编辑器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>编辑器</title>
<link href="/css/bootstrap.min.css?v=3.3.6" th:href="@{/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet">
<link href="/summernote/summernote.css" rel="stylesheet" th:href="@{/summernote/summernote.css}"/>
<script src="/js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script src="/js/bootstrap.min.js?v=3.3.6" th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>
<script src="/summernote/summernote.js" th:src="@{/summernote/summernote.js}"></script>
<script src="/summernote/lang/summernote-zh-CN.js" th:src="@{/summernote/lang/summernote-zh-CN.js}"></script>    <!-- 中文-->
<style>
   .m{ width: 500px; margin-left: auto; margin-right: auto; }
</style>
<script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        var ctxPath = /*[[@{/}]]*/ '';
        /*]]>*/
        console.info(ctxPath);
</script>
<script>
$(document).ready(function() {
    $('.summernote').summernote({  
        height: 500,
        tabsize: 2,
        lang: 'zh-CN',
        callbacks: {  
            onImageUpload: function(files) { //the onImageUpload API  
               console.log("图片上传"+files[0]);
                img = sendFile(files[0]);  
        }  
    }  
    });  
});
function sendFile(file) {  
    data = new FormData();  
    data.append("file", file);
    $.ajax({  
        data: data,  
        type: "POST",  
        url: ctxPath+"/common/sysFile/upload",
        cache: false,  
        contentType: false,  
        processData: false,  
        success: function(data) {
            console.log(data);
            $(".summernote").summernote('insertImage', ctxPath+data.fileName, 'image name'); // the insertImage API
        }  
    });  
}  
</script>
</head>

<body>
   <div class="m">       
      <div class="summernote">summernote 1</div>
   </div>
</body>
</html>

这一步网上的文档很详细一些路径请自己根据项目需要配置

2 服务端上传接口

@ResponseBody
@PostMapping("/upload")
R upload(@RequestParam("file") MultipartFile[] file, @RequestParam(value = "type", defaultValue = "0") String type, HttpServletRequest request) throws IOException {
    if ("test".equals(getUsername())) {
        return R.error(1, "演示系统不允许修改,完整体验请部署程序");
    }
    type = type==null||type==""?type="2":type;
    LOGGER.info(">>>>>>>>>>>>>>>>>>>>> {}", type);
    Date createTime = new Date();
    if (null != file && file.length > 0) {
        //遍历并保存文件
        for (MultipartFile files : file) {
            if (file != null) {
                //取得当前上传文件的文件名称
                String fileName = files.getOriginalFilename();
                //如果名称不为“”,说明该文件存在，否则说明该文件不存在
                if (type.equals("1")) {//OSS方式上传文件
                    String suffix = files.getOriginalFilename().substring(files.getOriginalFilename().lastIndexOf("."));
                    String url = ossService.build().uploadSuffix(files.getBytes(), suffix);
                    //保存文件信息
                    fileName = FileUtil.renameToUUID(fileName);
                    SysFile sysFile = new SysFile(FileType.fileType(fileName), url, new Date(), getUserId());
                    if (sysFileService.save(sysFile) > 0) {
                        LOGGER.info(">>>>>>>>>>>>>OSS上传图片路径  {}", url);
                        return R.ok().put("fileName", sysFile.getUrl());
                    }
                } else {//本地上传图片方式
                    fileName = FileUtil.renameToUUID(fileName);
                    SysFile sysFile = new SysFile(FileType.fileType(fileName), "/files/" + fileName, new Date(), getUserId());
                    try {
                        FileUtil.uploadFile(files.getBytes(), bootdoConfig.getUploadPath(), fileName);
                    } catch (Exception e) {
                        return R.error();
                    }
                    if (sysFileService.save(sysFile) > 0) {
                        LOGGER.info(">>>>>>>>>>>>>本地上传图片路径  {}", "/files/" + fileName);
                        return R.ok().put("fileName", sysFile.getUrl());
                    }
                }
            }
        }
    } else {
        return R.error("上传文件不能为空");
    }
    return R.ok();
}

这一步就是个简单的二进制上传接口有需要的根据自己项目需要更改

最后来一张debug效果图

bootstrap summernote富文本编辑器图片上传干货分享

猜你喜欢