SpringBoot整合UEditor富文本实现自定义上传图片、视频到七牛云存储

下载 UEditor

一、下载的是jsp版本

二、将下载的文件放在springboot静态资源的resources/static/js/文件夹下

在pom.xml加入如下的配置导入所需的jar包

<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.2</version>
		</dependency>
		<dependency>
			<groupId>commons-codec</groupId>
			<artifactId>commons-codec</artifactId>
			<version>${commons-codec.version}</version>
		</dependency>

		<dependency>
			<groupId>commons-io</groupId>
			<artifactId>commons-io</artifactId>
			<version>2.4</version>
		</dependency>

		<dependency>
			<groupId>com.dcssn</groupId>
			<artifactId>ueditor-qiniu-spring-boot-starter</artifactId>
			<version>0.0.3</version>
		</dependency>
复制代码

在application.yml配置文件中加入如下配置：

ue:
  config-file: static/js/ueditor/jsp/config.json #resources目录下配置文件的位置
  server-url: /static/js/ueditor/ueditor.do #服务器统一请求接口路径
  url-prefix: /file/ #"/"结尾
  #七牛云存储，去注册申请填入本身的信息
qiniu:
  accessKey: U2cE0UOM3YbUW************PnNxPj6YmOsHrCN
  secretKey: -HuyEESUeJEKE************5TWQt6xPUR3Upkc
  domain: qnsa.****.com
  #cdn: #下面bucket绑定的cdn 域名
  bucket: salesassistprod
  zone: z2
复制代码

修改ueditor/ueditor.config.js 下默认接收请求上传图片的路径，跟application.yml配置的ue.server-url=/static/js/ueditor/ueditor.do 一致。

在jsp页面引入ueditor

一、引入配置文件

<script  type="text/javascript" src="/static/js/bootstrap3/js/jquery-3.3.1.min.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/static/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/static/js/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="/static/js/ueditor/lang/zh-cn/zh-cn.js"></script>
复制代码

二、在html>body须要引入位置定义

<div id="ueditor">
		<script id="container" type="text/plain">
        </script>
  </div>
复制代码

三、编写js代码

<script type="text/javascript">
 UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    var ue = UE.getEditor('container',{
        	toolbars:
        		[
        			[
	        	    	'undo',
	        	    	'redo',
	        	    	'formatmatch', //格式刷
	        	    	'source', //源代码
	        	    	'cleardoc', //清空文档
	        	    	'bold', //加粗
				        'indent', //首行缩进
				        'italic', //斜体
						'underline', //下划线
				        'strikethrough', //删除线
				        'subscript', //下标
				        'superscript', //上标
				        'pasteplain', //纯文本粘贴模式
				        'selectall', //全选
				        'preview', //预览
				        //'horizontal', //分隔线
				        'removeformat', //清除格式
				        'time', //时间
				        'date', //日期
				        'fontfamily', //字体
				        'fontsize', //字号
				        'paragraph', //段落格式
			        ],
			        [
			        	'emotion', //表情
				        //'spechars', //特殊字符
				        //'help', //帮助
				        'justifyleft', //居左对齐
				        'justifyright', //居右对齐
				        'justifycenter', //居中对齐
				        'justifyjustify', //两端对齐
				        'forecolor', //字体颜色
				        'backcolor', //背景色
				        'insertorderedlist', //有序列表
				        'insertunorderedlist', //无序列表
				        'lineheight', //行间距
				        'customstyle', //自定义标题
				        'touppercase', //字母大写
				        'tolowercase', //字母小写
				        'imagenone', //默认
				        'imageleft', //左浮动
				        'imageright', //右浮动
				        'imagecenter', //居中
				        'wordimage', //图片转存
				        //'snapscreen', //截图
				        //'scrawl', //涂鸦
				        'simpleupload', //单图上传
				        //'insertimage', //多图上传
				        'insertvideo', //视频
				        'fullscreen', //全屏
                        'link', //超连接
                        //'mobile'
			        ]
		        ],
		        enableAutoSave:false,
		        elementPathEnabled : false,
		        wordCount:true,//是否开启字数统计
		        maximumWords:100000,//字数限制
		        wordCountMsg: '已输入{#count}个字符, 还可输入{#leave}个字符。',
		        initialFrameHeight:320,
		        iframeCssUrl: '/static/js/ueditor/themes/iframe.css',// 引入css
        });
       UE.Editor.prototype.getActionUrl = function(action) {
            if (action == 'uploadimage' || action == 'uploadscrawl' ) {
                return '/upload/uploadimages.do';//自定义springboot后台上传的接口
            }
            else if (action == 'uploadvideo'){
            	return '/upload/uploadvideo.do';//自定义springboot后台上传的接口
            } 
            else {
                return this._bkGetActionUrl.call(this, action);
            }
        }
        </script>
复制代码

编写springboot代码后台接口的主要代码

一、在bean编写一个加载application.yml下qiniu的配置信息类，get、set方法本身添加

import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;
@Component
@ConfigurationProperties(prefix = "qiniu")
public class QiNiu {
	private String accessKey;
	private String secretKey;
	private String domain;
	private String bucket;
	private String zone;
	}
复制代码

二、在controller的类编写上传图片、视频的接口。导入的包自行添加

@RestController
@RequestMapping("/upload")
public class UEditorController {
	@Autowired
	private  QiNiu qiNiu;
	Logger logger = LoggerFactory.getLogger(getClass());
	// 获取上传凭证
	@RequestMapping("/uploadimages.do")
	public Object uploadImage(MultipartFile upfile) {
	    // ...生成上传凭证，而后准备上传
	    Map<String,Object> map=new HashMap<>();
	    //上传七牛云
	    // 构造一个带指定Zone对象的配置类
	    Configuration cfg = new Configuration(Zone.zone2());
	    // ...其余参数参考类注释
	    UploadManager uploadManager = new UploadManager(cfg);
	    String fileName=upfile.getOriginalFilename();//xxx.jpg
	    String uuid=UUID.randomUUID().toString();//abcd
	    String newFileName=uuid+fileName.substring(fileName.lastIndexOf("."));//新的文件名
	    Auth auth = Auth.create(qiNiu.getAccessKey(), qiNiu.getSecretKey());
	    String upToken = auth.uploadToken(qiNiu.getBucket());
	    try{
	        Response response = uploadManager.put(upfile.getBytes(), newFileName, upToken);//
	        // 解析上传成功的结果
	        DefaultPutRet putRet = new Gson().fromJson(response.bodyString(),         
	        DefaultPutRet.class);
	        logger.info("成功上传图片到七牛云");
	        logger.info("上传七牛云生成的key：" + putRet.key);
	        logger.info("上传七牛云生成的hash：" + putRet.hash);
	        logger.info("上传七牛云完整路径为：" + "http://"+qiNiu.getDomain()+"/"+newFileName);
	        map.put("state","SUCCESS");
	        map.put("url","http://"+qiNiu.getDomain()+"/"+newFileName);
	        map.put("original",newFileName);
	        map.put("title",newFileName);	       
	    }catch(Exception ex){
	        logger.error("上传失败"+ex.getMessage());
	        map.put("state","ERROR");
	        map.put("url","");
	        map.put("original","");
	        map.put("title","");
	    }
	        return map;
	}
	
	@RequestMapping(value = "/uploadvideo.do", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
	public Map<String,Object> saveVideo(MultipartHttpServletRequest req){
			Map<String,Object> rs =new HashMap<String, Object>();
			MultipartFile file =null;
			String fileName ="";
			String filePath ="";
			long startTime = System.currentTimeMillis();// 获取当前时间
			Auth auth = Auth.create(qiNiu.getAccessKey(), qiNiu.getSecretKey());
		    String upToken = auth.uploadToken(qiNiu.getBucket());
		    logger.info("获取token为：" + upToken);
			try{
				file = req.getFile("upfile");
				fileName = file.getOriginalFilename();
	            // 构造一个带指定Zone对象的配置类
	    	    Configuration cfg = new Configuration(Zone.zone2());
	    	    // ...其余参数参考类注释
	    	    UploadManager uploadManager = new UploadManager(cfg);
	    	    String uuid=UUID.randomUUID().toString();
	    	    String newFileName=uuid+fileName.substring(fileName.lastIndexOf("."));//新的文件名
				Response response = uploadManager.put(file.getBytes(), newFileName , upToken);
		        // 解析上传成功的结果
		        DefaultPutRet putRet = new Gson().fromJson(response.bodyString(),         
		        DefaultPutRet.class);	      
		        logger.info("视频文件上传成功!");
	            long endTime = System.currentTimeMillis();//获取结束时间
	            logger.info("视频文件上传用时：" + (endTime - startTime) + "ms");		          
		        logger.info("上传七牛云生成的key：" + putRet.key);
		        logger.info("上传七牛云生成的hash：" + putRet.hash);				
		        filePath = "http://" + qiNiu.getDomain() + "/" + putRet.key;//构造上传后的视频路径
				rs.put("state","SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
				rs.put("url",filePath);//返回上传到七牛云的成功路径
				rs.put("title", newFileName);
				rs.put("original", newFileName);
			}catch(Exception e) {
				logger.error("文件上传失败",e);
				rs.put("state","文件上传失败!");
				rs.put("url","");
				rs.put("title","");
				rs.put("original","");
			}
			return rs;
	}
}

复制代码

其余博客：
docker安装18.03.0+rancher1.6.17 的容器虚拟化部署
vue.js+iview 实现全局加载的公用方法
欢迎留言评论学习