Ueditor 单图、多图、视频、附件的上传及在线管理总结

简介

上一篇文章已经提到了Ueditor百度的富文本插件的好处，在这里就不多啰嗦了，主要来说说Ueditor在java开发中针对Ueditor 单图、多图、视频的上传及其所对应的在线管理问题及代码的总结。
Ueditor在进行单图、多图、视频、文件上传的时候都是以String类型的文件附件的形式上传的。可以简单总结三点：
		第一步：首先看  config.json中针对上传图片配置项设置，查看imageActionName、imageFileName、imagePathFormat；
		第二步：不管是上传图片、视频、都是以文件附件的形式来上传的，所以查看附件配置项以及附件路径等等；
		第三步：查看源码的image.js看起ajax的返回类型，需要啥就补充啥；前提条件：result.put("state", "SUCCESS");
接下来一步一步分析吧！

源码config.json配置项

    /* 上传图片配置项 */
    "imageActionName": "/attachment/uploadbd", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "", /* 图片访问路径前缀 */
    "imagePathFormat": "/../UEditor_jsp/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                                /* {time} 会替换成时间戳 */
                                /* {yyyy} 会替换成四位年份 */
                                /* {yy} 会替换成两位年份 */
                                /* {mm} 会替换成两位月份 */
                                /* {dd} 会替换成两位日期 */
                                /* {hh} 会替换成两位小时 */
                                /* {ii} 会替换成两位分钟 */
                                /* {ss} 会替换成两位秒 */
                                /* 非法字符 \ : * ? " < > | */
                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
                     
       /* 上传视频配置 */
    "videoActionName": "video", /* 执行上传视频的action名称 */
    "videoFieldName": "upfile", /* 提交的视频表单名称 */
    "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "videoUrlPrefix": "", /* 视频访问路径前缀 */
    "videoMaxSize": 102400000, /* 上传大小限制，单位B，默认100MB */
    "videoAllowFiles": [
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */

    /* 上传文件配置 */
    "fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
    "fileFieldName": "upfile", /* 提交的文件表单名称 */
    "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    "fileUrlPrefix": "", /* 文件访问路径前缀 */
    "fileMaxSize": 51200000, /* 上传大小限制，单位B，默认50MB */
    "fileAllowFiles": [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ], /* 上传文件格式显示 */

    /* 列出指定目录下的图片     在线管理预览 */
    "imageManagerActionName": "/images/attachment/", /* 执行图片管理的action名称 */
    "imageManagerListPath": "/ueditor/jsp/upload/image/", /* 指定要列出图片的目录 */
    "imageManagerListSize": 20, /* 每次列出文件数量 */
    "imageManagerUrlPrefix": "", /* 图片访问路径前缀 */
    "imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */

    /* 列出指定目录下的文件    在线管理预览*/
    "fileManagerActionName": "listfile", /* 执行文件管理的action名称 */
    "fileManagerListPath": "/ueditor/jsp/upload/file/", /* 指定要列出文件的目录 */
    "fileManagerUrlPrefix": "", /* 文件访问路径前缀 */
    "fileManagerListSize": 20, /* 每次列出文件数量 */
    "fileManagerAllowFiles": [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ] /* 列出的文件类型 */

源码controller.jsp配置项

<%

    request.setCharacterEncoding( "utf-8" );
	response.setHeader("Content-Type" , "text/html");
	
	String rootPath = application.getRealPath( "/" );
	
	String action = request.getParameter("action");  
    String result = new ActionEnter( request, rootPath ).exec();  
    if( action!=null && (action.equals("listfile") || action.equals("listimage") ) ){  
        rootPath = rootPath.replace("\\", "/");  
        result = result.replaceAll(rootPath, "/");//把返回路径中的物理路径替换为 '/'  
    }  
    out.write( result );

%>
注：(action.equals("listfile") || action.equals("listimage")中的listfile与listimage，对应的是config.json中的fileActionName

service方法

	public String uploadImage(MultipartFile file, String originalFilename, String type, Member member) throws Exception {
		//判断文件是否允许呗
        if (this.getAllowFileType().contains("." + FilenameUtils.getExtension(file.getOriginalFilename()))) {
        	//新文件名
            String fileName = UUIDUtil.creatUUID()  + type;
            File rfile = ResourceUtils.getFile("classpath:static");
            String lastPath = rfile.getAbsolutePath() + "\\images\\attachment\\" + fileName;
            //判断存储路径是否已经存在，不存在则需要先创建出来
            try {
                //将文件存储到实际存储目录中
            	FileUtils.copyInputStreamToFile(file.getInputStream(), new File(lastPath));
            	Attachment att = new Attachment();
            	att.setOriginalName(originalFilename);
            	att.setSuffix(type);
            	att.setFileSize(file.getSize());
            	att.setContentType(type);
            	att.setMember(member);
            	att.setUploadTime(new Date());
                att.setFilePath("images/attachment/" + fileName);
                attachmentDao.save(att);
            } catch (Exception e) {
                logger.error("上传文件存储失败！", e);
                throw new Exception("上传文件存储失败", e);
            }
            return "images/attachment/" + fileName;
        } else {
            throw new Exception("对不起，不支持上传此类型文件！");
        }
	}
	//视频上传
	public String uploadVideo(MultipartFile file, String originalFilename, String type, Member member) throws Exception {
		//判断文件是否允许呗
        if (this.getAllowFileType().contains("." + FilenameUtils.getExtension(file.getOriginalFilename()))) {
        	//新文件名
            String fileName = UUIDUtil.creatUUID()  + type;
            File rfile = ResourceUtils.getFile("classpath:static");
            String lastPath = rfile.getAbsolutePath() + "\\video\\attachment\\" + fileName;
            //判断存储路径是否已经存在，不存在则需要先创建出来
            try {
                //将文件存储到实际存储目录中
            	FileUtils.copyInputStreamToFile(file.getInputStream(), new File(lastPath));
            	Attachment att = new Attachment();
            	att.setOriginalName(originalFilename);
            	att.setSuffix(type);
            	att.setFileSize(file.getSize());
            	att.setContentType("视频");
            	att.setMember(member);
            	att.setUploadTime(new Date());
                att.setFilePath("video/attachment/" + fileName);
                attachmentDao.save(att);
            } catch (Exception e) {
                logger.error("上传文件存储失败！", e);
                throw new Exception("上传文件存储失败", e);
            }
            return "video/attachment/" + fileName;
        } else {
            throw new Exception("对不起，不支持上传此类型文件！");
        }
	}
	
	//上传附件
	public String uploadAttachment(MultipartFile file, String originalFilename, String type, Member member) throws Exception {
		//判断文件是否允许呗
        if (this.getAllowFileType().contains("." + FilenameUtils.getExtension(file.getOriginalFilename()))) {
        	//新文件名
            String fileName = UUIDUtil.creatUUID()  + type;
            File rfile = ResourceUtils.getFile("classpath:static");
            String lastPath = rfile.getAbsolutePath() + "\\files\\attachment\\" + fileName;
            //判断存储路径是否已经存在，不存在则需要先创建出来
            try {
                //将文件存储到实际存储目录中
            	FileUtils.copyInputStreamToFile(file.getInputStream(), new File(lastPath));
            	Attachment att = new Attachment();
            	att.setOriginalName(originalFilename);
            	att.setSuffix(type);
            	att.setFileSize(file.getSize());
            	att.setContentType("附件");
            	att.setMember(member);
            	att.setUploadTime(new Date());
                att.setFilePath("files/attachment/" + fileName);
                attachmentDao.save(att);
            } catch (Exception e) {
                logger.error("上传文件存储失败！", e);
                throw new Exception("上传文件存储失败", e);
            }
            return "files/attachment/" + fileName;
        } else {
            throw new Exception("对不起，不支持上传此类型文件！");
        }
	}
	注：视频图片是可以直接显示的，附件上传之后需要下载之后才可以显示出来；

Ueditor整合Spring Boot 的 UeditorController类

package cn.gson.crm.controller;

import java.io.File;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.commons.io.IOUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartRequest;
import org.springframework.web.servlet.ModelAndView;

import cn.gson.crm.common.Base64Utils;
import cn.gson.crm.common.Constants;
import cn.gson.crm.common.UUIDUtil;
import cn.gson.crm.model.dao.AttachmentDao;
import cn.gson.crm.model.domain.Attachment;
import cn.gson.crm.model.domain.Member;
import cn.gson.crm.service.AttachmentService;

/**
 * 描述：Ueditor整合spring boot实现方法
 * 功能：图片的上传、预览，视屏的上传，附件的上传、预览，
 * 注：图片预览只针对 ".png", ".jpg", ".jpeg", ".gif", ".bmp"
 * 	  附件预览只针对 压缩文件，word文档，Excel文件，PPT,txt文件
 * 
 * @author fyh
 * 
 */

@Controller
@RequestMapping("/UEditor_jsp")
public class UeditorController {
	
	@Autowired
    AttachmentService attachmentService;
	//附件上传的dao
	@Autowired
	AttachmentDao attachmentDao;
	

    @RequestMapping("/config")
    @ResponseBody
    public Object config(String action, HttpServletRequest request, HttpServletResponse response, HttpSession session , String scwalfile) throws Exception {
    	
    	Member member = (Member)session.getAttribute(Constants.SESSION_MEMBER_KEY);
        Map<String, Object> result = new HashMap<String, Object>();
        if ("config".equals(action))
        {
        	ModelAndView mv = new ModelAndView("redirect:/UEditor_jsp/jsp/config.json");
        	return mv;
        }
        //单图上传与多图上传
        else if("/attachment/uploadbd".equals(action))
        {
        	try {
                MultipartRequest multipartRequest = (MultipartRequest) request;
                MultipartFile file = multipartRequest.getFile("upfile");
                String originalFilename = file.getOriginalFilename();
                String fileType = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase();
                byte[] bytes = IOUtils.toByteArray(file.getInputStream());
                String vivofsImagePath = attachmentService.uploadImage(file, originalFilename, fileType, member);
                result.put("state", "SUCCESS");
                result.put("name", originalFilename);
                result.put("original", originalFilename);
                result.put("size", bytes.length);
                result.put("type", fileType);
                result.put("url", vivofsImagePath);
            } catch (Exception e) {
                result.put("state", "FAILED");
            }
        }
        //图片在线预览
        else if ("/images/attachment/".equals(action))
        {
        	try {
        		List<Map<String, String>> imgList = new ArrayList<Map<String, String>>();
        		
        		Iterable<Attachment> findAll = attachmentDao.findAll();
        		for(Attachment attachmentList : findAll){
        			Map<String, String> map = new HashMap<>();
        			String filePath = "/" +attachmentList.getFilePath();
        			String aftername = filePath.substring(filePath.lastIndexOf("."));
        			if(aftername.equals(".png") || aftername.equals(".jpg") || aftername.equals(".jpeg") || aftername.equals(".gif") || aftername.equals(".bpm")){
        				map.put("url", filePath);
                		imgList.add(map);
        			}
        		}
            	int start = 0;
            	int total = 10;
            	result.put("state", "SUCCESS");
            	result.put("list", imgList); //图片路径列表
            	result.put("start", start); //图片开始位置
            	result.put("total", total); //图片总数
            } catch (Exception e) {
                result.put("state", "FAILED");
            }
        }
        //上传视频
        else if("video".equals(action))
        {
        	try {
        		MultipartRequest multipartRequest = (MultipartRequest) request;
                MultipartFile file = multipartRequest.getFile("upfile");
                String originalFilename = file.getOriginalFilename();
                String fileType = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase();
                String videoPath = attachmentService.uploadVideo(file, originalFilename, fileType, member);
                result.put("state", "SUCCESS");
                result.put("url", videoPath);
                result.put("type", fileType);
                result.put("original", originalFilename);
                
			} catch (Exception e) {
				result.put("state", "FAILED");
			}
        	 
        }
        //上传附件，注附件在下载只有才可以浏览,初步尝试为Excel文件
        else if("uploadfile".equals(action))
        {
        	try {
        		MultipartRequest multipartRequest = (MultipartRequest) request;
                MultipartFile file = multipartRequest.getFile("upfile");
                String originalFilename = file.getOriginalFilename();
                String fileType = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase();
                String uploadAttachment = attachmentService.uploadAttachment(file, originalFilename, fileType, member);
                result.put("state", "SUCCESS");
                result.put("name", originalFilename);
                result.put("original", originalFilename);
                result.put("type", fileType);
                result.put("url", uploadAttachment);
                
			} catch (Exception e) {
				result.put("state", "FAILED");
			}
        }
        //附件在线预览
        else if("listfile".equals(action))
        {
        	try {
        		List<Map<String, String>> fileList = new ArrayList<Map<String, String>>();
        		//查找到附件表中的所有数据
        		Iterable<Attachment> findAll = attachmentDao.findAll();
        		for(Attachment attachmentList : findAll){
        			Map<String, String> map = new HashMap<>();
        			String filePath = attachmentList.getFilePath();
        			String aftername = filePath.substring(filePath.lastIndexOf("."));
        			//附件预览展示页面文件所要满足的条件
        			if(aftername.equals(".docx") || aftername.equals(".xlsx") || aftername.equals(".doc") || aftername.equals(".pdf")
        					 || aftername.equals(".rar") || aftername.equals(".zip") || aftername.equals(".ppt") || aftername.equals(".pptx")
        					 || aftername.equals(".txt")){
        				map.put("url", filePath);
        				fileList.add(map);
        			}
        		}
            	int start = 0;
            	int total = 10;
            	result.put("state", "SUCCESS");
            	result.put("list", fileList); //图片路径列表
            	result.put("start", start); //图片开始位置
            	result.put("total", total); //图片总数
            } catch (Exception e) {
                result.put("state", "FAILED");
            }
        	
        }
        return result;
    }

}

说明

 当不知道返回给页面的所需参数时，我们可以查看针对源码的js文件看其ajax请求。以video.js为例
  uploader.on('uploadSuccess', function (file, ret) {
                var $file = $('#' + file.id);
                try {
                    var responseText = (ret._raw || ret),
                        json = utils.str2json(responseText);
                    if (json.state == 'SUCCESS') {
                        uploadVideoList.push({
                            'url': json.url,
                            'type': json.type,
                            'original':json.original
                        });
                        $file.append('<span class="success"></span>');
                    } else {
                        $file.find('.error').text(json.state).show();
                    }
                } catch (e) {
                    $file.find('.error').text(lang.errorServerUpload).show();
                }
            });
      从这段源码中我们可以看到，其需要  url 、type、original

在上传视频时需要设置上传视频的大小application.properties

# 允许文件上传的尺寸大小
spring.http.multipart.maxFileSize=100Mb
spring.http.multipart.maxRequestSize=100Mb

成果展示