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

爱被打了一巴掌 2021-09-19 19:36 886阅读 0赞

# 简介 #

上一篇文章已经提到了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

# 成果展示 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDE5MTA1_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDE5MTA1_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDE5MTA1_size_16_color_FFFFFF_t_70]: /images/20210901/27487cf632944416b88aa79d2f4a8ed9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDE5MTA1_size_16_color_FFFFFF_t_70 1]: /images/20210901/66533aa4351f499caea093f8a3d9ad96.png