基于spring-boot的web应用，ckeditor上传文件图片文件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

说来惭愧，这个应用调试，折腾了我一整天，google了很多帖子，才算整明白，今天在这里做个记录和分享吧，也作为自己后续的参考！

第一步，ckeditor（本博文论及的ckeditor版本4.5.6）的配置图片文件上传功能，默认这个是没有开启的，就不用多说，ckeditor官网上也说的很清楚！http://docs.ckeditor.com

下面简单的说下配置（配置文件algoConfig.js）：

CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
]; config.removeButtons = 'Source,Save,NewPage,Scayt';
config.image_previewText=' '; //预览区域显示内容
config.filebrowserImageBrowseUrl = '/browse/mgmt/img';
config.filebrowserImageUploadUrl = '/upload/mgmt/img';
};

上图中，背景颜色加高亮的为关键配置。等号左边的是key，等号右边的，则对应于web应用中的一个url，这个是配合后台应用中一个controller的处理，也就是一个servlet的操作。具体如何处理，后面再说！

再多罗嗦一下，我的这个配置中，涉及到图片预览区的那堆看不懂的文字的去除处理。我将其清掉了！如上面的21行的配置。另外，我的ckeditor工具栏中，去掉了一部分的button。具体如何操作，可以参考ckeditor的samples下面的toolbarconfigurator里面有个index.html，在浏览器里打开，可以参照着说明即可定制自己的工具栏。

在应用的js文件中作如下的配置，即可以enable定制的CKeditor。

/**
* 下面是用CKeditor进行编辑文件
*/
CKEDITOR.replace( 'practice_content', // practice_content是html文件中的对应的textarea编辑区的ID名称，注意不要写成#practice_content
{
language: 'zh-cn',
uiColor: '#c3c8d1',
customConfig: '/js/ckeditor/algoConfig.js' //自定义自己的toobar风格
});

到现在为止，定制的CKeditor的图片上传配置部分算是结束了。

此时，可以看到页面上的ckeditor的状态为下图所示：

说明下：图中1标记对应配置：config.filebrowserImageUploadUrl = '/upload/mgmt/img';

图中2标记对应配置：config.filebrowserImageBrowseUrl = '/browse/mgmt/img';

图中3标记对应配置：config.image_previewText=' ';

第二步，就是图片文件上传的后台处理了，这步就是添加url /upload/mgmt/img的后台响应。由于ckeditor的文件上传是采用的表单form以post的方式提交enctype为multipart/form-data的文件到后台服务器（此数据可以从html页面debug方式查看，如下图所示），那么对应的后台文件接受，则也采用Multipartfile的形式。

所以，后台的程序，应该也不是很难实现的事情。我就直接贴代码了，有兴趣的，自己可以看看！

@RequestMapping(value="/upload/mgmt/img", method=RequestMethod.POST)
public void handleFileUpload(User user, @RequestParam("upload") MultipartFile file,
HttpServletRequest request, HttpServletResponse response){
String name = "";
if (!file.isEmpty()) {
try {
response.setContentType("text/html; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
9 response.setHeader("X-Frame-Options", "SAMEORIGIN");
PrintWriter out = response.getWriter(); String fileClientName = getFileName(file.getOriginalFilename());
String fileFix = StringUtils.substring(fileClientName,
fileClientName.lastIndexOf(".") + 1);
if (!StringUtils.equalsIgnoreCase(fileFix, "jpg")
&& !StringUtils.equalsIgnoreCase(fileFix, "jpeg")
&& !StringUtils.equalsIgnoreCase(fileFix, "bmp")
&& !StringUtils.equalsIgnoreCase(fileFix, "gif")
&& !StringUtils.equalsIgnoreCase(fileFix, "png")) {
logger.error("Incorrect format of the uploading file -- " + fileFix);
return;
} if (logger.isInfoEnabled()) {
logger.info("Begin uploading: " + file.getName());
} // 为了客户端已经设置好了图片名称在服务器继续能够明确识别，这里不改名称
// 获取目录
30 File floder = buildFolder(user, request, FileType.IMAGE);
if (null == floder) {
logger.info("folder is null");
return;
} File newfile = new File(floder, fileClientName);
byte[] bytes = file.getBytes();
BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(newfile));
stream.write(bytes);
stream.close(); if (logger.isInfoEnabled()) {
logger.info("Uploading done，floder: " + newfile.getPath());
} // 组装返回url，以便于ckeditor定位图片
47 String fileUrl = request.getContextPath() + MueasConstants.APP_RUNNING_FILES_DIR;
48 fileUrl += IMAGE_DIR + File.separator + newfile.getName();
49 fileUrl = StringUtils.replace(fileUrl, "//", "/");

// 将上传的图片的url返回给ckeditor
String callback = request.getParameter("CKEditorFuncNum");
String script = "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(" + callback + ", '" + fileUrl + "');</script>"; out.println(script);
out.flush();
out.close();
} catch (Exception e) {
logger.info("You failed to upload " + name + " => " + e.getMessage());
}
} else {
logger.info("You failed to upload " + name + " because the file was empty.");
}
}

其中，代码里面的红色部分比较值得注意，其他都不是太难的事情。

第一处红色部分是为了解决下面的错误：

Refused to display 'http://localhost:8080/upload/mgmt/img?CKEditor=practice_content&CKEditorFuncNum=1&langCode=zh-cn' in a frame because it set 'X-Frame-Options' to 'DENY'.

第二处（30行）和第三处（47-49行）是为了让上传上来的文件存放的位置和ckeditor上传文件获取的URL地址（GET方式）的一致性。

这里再上传一下创建存放文件的目录的代码：

private File buildFolder(User user, HttpServletRequest request, FileType type) { String realPath = request.getSession().getServletContext().getRealPath(MueasConstants.APP_RUNNING_FILES_DIR);
String folderdir = "";
//如果不存在，创建
switch(type){
case IMAGE:
folderdir += realPath + IMAGE_DIR;
break;
case FILE:
folderdir += realPath + FILE_DIR;
break;
case FLASH:
folderdir += realPath + FLASH_DIR;
break;
case VIDEO:
folderdir += realPath + VIDEO_DIR;
break;
} File floder = new File(folderdir);
if (!floder.exists()) {
if (!floder.mkdirs()) {
logger.error("Create folder failed！ path=" + folderdir);
return null;
}
}
return floder;
}

这里，根据文件类型，创建不同的子目录。其中重点是request.getSession().getServletContext().getRealPath(MueasConstants.APP_RUNNING_FILES_DIR);这个，大家若不是很明白，可以查看一下文档。

另外，就是配合使用的request.getContextPath() + MueasConstants.APP_RUNNING_FILES_DIR；总之，就是为了让地址一致，存放文件的位置地址要让取文件的GET指令能够得到文件即可。

最后说下，为了控制上传文件的大小，在spring-boot的配置文件中添加下面的信息：

multipart.maxFileSize = 3Mb
multipart.maxRequestSize = 20Mb

运行起来后，可以做测试图片文件上传的功能了，效果如下图所示：

此时，点击“确定”按钮，图片文件就会显示在自己设计的textarea的区域了。是不是不那么难？

话说回来，调通了是觉得不难，但是，在没有调通的时候，就那个x-options-frame的问题，就让我很头疼。

其次，在后台处理的代码中，起初，我采用的是commons-fileupload插件中的代码处理的，但是总不成功，一下午，google了很多外文帖子，也不凑效，遂改成上面的代码处理。其commons-fileupload关键参考代码如下：

DiskFileItemFactory factory = new DiskFileItemFactory();
// maximum size that will be stored in memory
factory.setSizeThreshold(maxMemSize); // Create a new file upload handler
ServletFileUpload upload = new ServletFileUpload(factory);
// maximum file size to be uploaded. upload.setSizeMax(maxFileSize); List<FileItem> fileItems = upload.parseRequest(request);

测试过程中，总是遇到列表filetems为空的问题，其实request中是有上传过来的文件信息的。折腾了很久，还是没有找到原因。算一个Open Point吧，若有高人或者过来人，可以给我指点一下。