layui富文本编辑器上传图片

layui是贤心大神的开源前端框架，也是对后端菜鸟非常友好的一个框架，平常开发的时候就比较喜欢使用这个，最近刚好写网站就到了layui的富文本编辑器，遇到一些有意思的事情，就和大家聊聊。
首先准备工作先到官网下载layui资源包
之后新建一个项目我平常使用springboot项目，如果不熟悉Springboot的请参考大佬教程，把下载好的资源包layui文件夹放到static下

配置一下端口，个人比较喜欢yml文件

server:
    port: 8784

之后我们可以在static下面新建一个html进行编辑，依照文档进行编写

这样我们就可以运行项目了，效果是这样的

当我们点击图片上传图标的时候会报接口异常，这个时候我们就需要编写图片上传代码
我们先编写一个图片上传接口

@RequestMapping(value="/uploadconimage",method=RequestMethod.POST)
	@ResponseBody
	public Map uploadconimage(HttpServletRequest request,@RequestParam MultipartFile file) {
		Map mv=new HashMap();
		Map mvv=new HashMap();
		 try {
	            String rootPath = request.getSession().getServletContext().getRealPath("/image/");
	            Calendar date = Calendar.getInstance(); //Calendar.getInstance()是获取一个Calendar对象并可以进行时间的计算，时区的指定
	            String originalFile = file.getOriginalFilename(); //获得文件最初的路径
	            String uuid = UUID.randomUUID().toString();    //UUID转化为String对象  
	           	String newfilename=date.get(Calendar.YEAR)+""+(date.get(Calendar.MONTH)+1)+""+date.get(Calendar.DATE)+uuid.replace("-", "")+originalFile;
	            //得到完整路径名
	            File newFile = new File(rootPath+newfilename);
	            /*文件不存在就创建*/
	            if(!newFile.getParentFile().exists()){
	                newFile.getParentFile().mkdirs();
	            }
	            String filename=originalFile.substring(0, originalFile.indexOf("."));
	            System.out.println(originalFile);
	            System.out.println(filename);
	            file.transferTo(newFile);
	            System.out.println("newFile : "+newFile);
	            String urlpat= "/image/"+ newfilename;
	            mvv.put("src", urlpat);
	            mvv.put("title",newfilename);
	            mv.put("code", 0);
	    		mv.put("msg", "上传成功");
	    		mv.put("data", mvv);
	    		return mv;
	        } catch (Exception e) {
	           e.printStackTrace();
	        	 mv.put("success", 1);
	        		return mv;
	        }
	}

然后在html中国配置上传接口

 var testEditor;
	layedit.set({
		  uploadImage: {
		    url: 'uploadconimage' //接口url
		    ,type: 'POST' //默认post
		  }
	 
		});

这样就可以上传图片了

这样我们就完成了编辑器的部署工作，在这里我们需要注意一些问题不然很容易进坑，首先配置文件上传接口和类型的JS代码一定在 layedit.build之前，否则是配置不上的，还有就是接口返回的json一定要严格遵守文档的的格式规范和状态码。否则无法解析，同样的返回的内容也要符合规范。

{
	"msg": "上传成功",
	"code": 0,
	"data": {
		"src": "/image/20191123e4aeef42a3d847ee9663c4cea6f3c611036622be4ea41b7bdfcbac1096881e83.jpg",
		"title": "20191123e4aeef42a3d847ee9663c4cea6f3c611036622be4ea41b7bdfcbac1096881e83.jpg"
	}
}

作为一个有求知欲的程序员，我尝试过修改返回内容发现会出现一些错误，code改为1，编辑器提示上传成功，但是不会显示图片，如果 src 为空则会出现这种情况，title和msg为空则不影响显示。