SpringBoot使用Ckediter上传图片

来源:互联网 发布:mybatis 配置打印sql 编辑:程序博客网 时间:2024/06/07 19:05

需求

通过ckediter的自带上传图片的插件,上传图片到我们自己的服务器上。

实现

ckediter的配置部分:找到ckeditor/ckeditor.js。

//后面的地址改为你上传图片的地址config.filebrowserImageUploadUrl= '/article/uploadImage'

后台Controller部分

@Controllerpublic class FileUploadController {    @RequestMapping(value = "article/uploadImage")    //这里的参数不用改    public void uplodaImg(@RequestParam("upload") MultipartFile file,HttpServletRequestrequest,  HttpServletResponse response){            //这是响应的对象(返回的数据对象)            PrintWriter out = response.getWriter();            //这个是Ckediter的回调方法,很重要(后边将通过上面的返回对象,返回给前端并触发Ckediter回调)            String CKEditorFuncNum = request.getParameter("CKEditorFuncNum");            //这部分是校验图片的后缀(格式)是否正确            if (uploadContentType.equals("image/pjpeg")                    || uploadContentType.equals("image/jpeg")) {                expandedName = ".jpg";            } else if (uploadContentType.equals("image/png")                    || uploadContentType.equals("image/x-png")) {                expandedName = ".png";            } else if (uploadContentType.equals("image/gif")) {                expandedName = ".gif";            } else if (uploadContentType.equals("image/bmp")) {                expandedName = ".bmp";            } else {                out.println("<script type=\"text/javascript\">");                out.println("window.parent.CKEDITOR.tools.callFunction("                        + CKEditorFuncNum + ",'',"                        + "'文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)');");                out.println("</script>");                return;            }            //这里是校验图片的大小是否允许            if (file.getSize() > 1024 * 1024 * 2) {                out.println("<script type=\"text/javascript\">");                out.println("window.parent.CKEDITOR.tools.callFunction("                        + CKEditorFuncNum + ",''," + "'文件大小不得大于2M');");                out.println("</script>");                return;            }            //这里是所有校验成功后的保存操作            DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO);            fileName = df.format(new Date()) + expandedName;            file.transferTo(new File(path + "/" + fileName));            // 这里是回调的内容:返回"图像"选项卡并显示图片 request.getContextPath()为web项目名              out.println("<script type=\"text/javascript\">");            out.println("window.parent.CKEDITOR.tools.callFunction("                    + CKEditorFuncNum + ",'" + "../../upload/img/" + fileName                    + "','')");            out.println("</script>");            return;    }}

注:上面的代码肯定不能直接粘来用,只是写个大概的逻辑,方便理解。具体实现可以参考这里,点我

原创粉丝点击