summernote上传图片（java+springMvc）

网上教程一堆坑，希望这篇文章能帮助和我一样踩进坑里的朋友跳出坑。

如果你觉得这边文章等帮助到你，请给个好评或转载，谢谢！

summernote上传图片步骤

html代码：

summernote容器

<div id="fileContent">
		                        
</div>

js代码：

var $summernote = $('#fileContent').summernote({
    ... //此处代码省略，
    //初始化富文本框
    height: 300,
    minHeight: null,
    maxHeight: null,
    focus: true,
    lang: 'zh-CN', //必须先加入summernote-zh-CN.js才能使用
    placeholder: "1、在此输入文字；2、插入图片可保存到服务器；3、通过键盘清除键可删除服务器的图片；4、可添加emojis",
    onImageUpload: function(files, editor, $editable) {
	    saveFile(files, editor, $editable);
    }
});

图片上传与回显：

function saveFile(files, editor, $editable) {
    //files是上传的图片集合，这里案例只是单张图片上传，网上教程一大推，此处代码省略
    var formdata = new FormData();//存放上传的文件数据
    //此处 $('.note-image-input')[0].files[0]与方法传过来的参数files[0]应该等价，可以自己尝试是否等价
    formdata.append("file", $('.note-image-input')[0].files[0]);  
    $.ajax({  
        data : formdata,  
        type : "POST",  
        url : "/upload/img", //上传图片请求服务器地址，（请写你自己的请求地址）  
        cache : false,  
        contentType : false,  
        processData : false,  
        dataType : "json",  
        success: function(src) {
            //src是服务器上传文件响应数据，格式自定义，这里响应数据是文件上传后的可访问的路径 
            if(src!=null&&src!=""){
                //上传成功，处理逻辑
                //回显图片
                editor.insertImage($editable, src); 
            }else{
                //上传失败，处理逻辑
            }
        },  
        error:function(){  
            //上传出错，处理逻辑
        }  
    });  
}

上传图片回显参考链接：https://github.com/summernote/summernote/issues/72

JAVA代码 (SpringMVC框架)：

@RequestMapping(value="/upload/img",method={RequestMethod.POST})
@ResponseBody
public String uploadSummerNoteImgs(@RequestParam("file") MultipartFile file, Model model) {
    //文件保存路径，自定义路径
    String savePath=IFile.SUMMERNOTE_FILE_UPLOAD;
    //保存文件，返回文件访问地址
    return FileUtil.savePngFile(file, savePath);
}

文件保存方法代码：

//此方法文件是上传到本地上的，如果你用的是其它文件服务器，请自己写文件保存方法（如：阿里云文件服务器）

/**
 * 功能描述：png格式文件上传
 * @param file
 * @param path
 * @param pactFileDown 访问路径
 * @return 上传文件保存后的目录
 */
 public static String savePngFile(MultipartFile file, String path) {
     //判断文件是否为空  
     if (!file.isEmpty()) {  
          try {
            	//创建每天生成的目录
            	String date = new SimpleDateFormat("yyyyMMdd").format(new Date());
            	path=path+date+"/";
                File filepath = new File(path);
                if (!filepath.exists()){ 
                    filepath.mkdirs();
                }
                //文件保存路径  
                //String filename = file.getOriginalFilename();
                //重新生成文件名
                String filename=UUID.randomUUID().toString().replace("-", "")+".png";
                String savePath = path + filename;
                //转存文件 
                File uploadFile = new File(savePath);
                file.transferTo(uploadFile);
                return date+"/"+filename;
          } catch (Exception e) {  
                e.printStackTrace();  
          }  
     }  
     return null;  
}

参考网上多个教程：发现存在共同的两个坑：

1.大部分教程都是把onImageUpload方法放在callbacks回调方法中的，但是经过多次测试之后发现这样写，根本不会进回调方法，所以这是一个巨坑。

var $summernote = $('#fileContent').summernote({
    ... //此处代码省略
    callbacks：{
        onImageUpload: function(files, editor, $editable) {
	        saveFile(files, editor, $editable);
        }
    }
});

2.回显图片，相信网上教程基本上都应该是这样写的。进过测试完全是不生效的。从上传图片的回调参数可知，还有editor和$editable两个参数，虽然我不清楚这两个参数。但是上传的图片要回显，也得知道回显内容的什么位置才能回显正确对吧。所以猜测这两个参数应该就是会起到这个作用。

function saveFile(files, editor, $editable) {

    //files是上传的图片集合，这里案例只是单张图片上传，网上教程一大推，此处代码省略
    var src='图片路径';
    
    //回显图片
   $('#fileContent').summernote('insertImage', src);

}

这是这几天用这个插件遇到坑，希望能帮助到遇到同样问题朋友。  其它部分代码未粘贴出来，是因为网上已经有哪些教程了，可以去网上找，绝对一大堆。