ueditor采用Spring MVC的方式整合七牛云实现上传图片视频附件等
Posted 泉城IT圈子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ueditor采用Spring MVC的方式整合七牛云实现上传图片视频附件等相关的知识，希望对你有一定的参考价值。
先说下大体思路：
根据ueditor官方文档
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') { return 'http://a.b.com/upload.php';
} else if (action == 'uploadvideo') { return 'http://a.b.com/video.php';
} else { return this._bkGetActionUrl.call(this, action);
}
}
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
action类型以及说明
uploadimage：//执行上传图片或截图的action名称uploadscraw：//执行上传涂鸦的action名称uploadvideo：//执行上传视频的action名称uploadfile：//controller里,执行上传视频的action名称
在使用ueditor的页面加上这段js代码，则跳转到自己定义的action中去。然后在action中以spring mvc的MultipartFile方式接受文件。由于七牛的上传方法，这里不需要区分文件类型。然后再转化为byte,使用七牛的上传方法进行上传即可。
具体实现代码
使用ueditor的页面
ueditor页面的代码，文件名为：editor.jsp
<%-- Created by IntelliJ IDEA. User: qhg Date: 2016/8/11 Time: 下午2:25 To change this template use File | Settings | File Templates. --%><%@ page contentType="text/html;charset=UTF-8" language="java" %><%@include file="/WEB-INF/include/taglibs.jsp"%><html><head>
<title>editor测试</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" charset="utf-8" src="${ctxStatic}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctxStatic}/ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="${ctxStatic}/ueditor/lang/zh-cn/zh-cn.js"></script>
<style type="text/css"> div{ width:100%; } </style></head><body><script id="editor" type="text/plain" style="width:1024px;height:500px;"></script><script type="text/javascript"> //实例化编辑器 //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例 var ue = UE.getEditor('editor'); UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl = function(action) { if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage' || action == 'uploadvideo' || action == 'uploadfile') { return '/qiniu/uploadfile'; }else { return this._bkGetActionUrl.call(this, action); } }</script></body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
修改ueditor相关配置文件
1.修改jsp/config.json
这里需要修改图片、视频等的访问路径前缀
imageUrlPrefix图片scrawlUrlPrefix涂鸦snapscreenUrlPrefix截图catcherUrlPrefix远程图片videoUrlPrefix视频fileUrlPrefix文件
这里根据需要进行修改，对应的路径前缀在准备上传到的七牛的存储空间的访问域名，如图：
如果开启了CDN加速域名请使用对应的域名访问。
2.修改ueditor根目录下的ueditor.config.js
这里需要修改两个地方。
a.var URL = window.UEDITOR_HOME_URL || "/static/ueditor/";
需要把"/static/ueditor/"修改成webapp下的ueditor资源目录的路径。
b.serverUrl: "/qiniu/config"
需要把"/qiniu/config"修改为对应的config方法。
3.maven包配置
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20160212</version>
</dependency>
<!-- 七牛云存储 -->
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>[7.0.0, 7.1.99]</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>org.json</artifactId>
<version>chargebee-1.0</version>
</dependency>
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.9</version>
</dependency>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
4.引入ueditor的Java代码
在这里建议引入ueditor的源代码，因为要修改一个文件。目录结构如下：
5.修改ConfigManager
打开ueditor源代码的ConfigManager，找到getConfigPath方法，修改为：
private String getConfigPath () { return this.rootPath
+ File.separator + "static/ueditor/jsp"
+ File.separator + ConfigManager.configFileName;
}
1
2
3
4
5
1
2
3
4
5
"static/ueditor/jsp"修改为config.json的路径，根目录为webapp。
6.编写七牛上传文件的类
package com.stocsis.chuangcity.common.utils;import com.qiniu.common.QiniuException;import com.qiniu.http.Response;import com.qiniu.storage.UploadManager;import com.qiniu.util.Auth;import java.io.IOException;/** * Created by qhg on 2016/8/19. */public class QiniuUtils {
//设置好账号的ACCESS_KEY和SECRET_KEY
String ACCESS_KEY = "your_ACCESS_KEY";
String SECRET_KEY = "your_SECRET_KEY"; //要上传的空间
String bucketname = "your_bucketname"; //密钥配置
Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY); //创建上传对象
UploadManager uploadManager = new UploadManager(); //简单上传，使用默认策略，只需要设置上传的空间名就可以了
public String getUpToken(){ return auth.uploadToken(bucketname);
} public void upload(byte[] file,String key) throws IOException { try { //调用put方法上传
Response res = uploadManager.put(file, key, getUpToken()); //打印返回的信息
System.out.println(res.bodyString());
} catch (QiniuException e) {
Response r = e.response; // 请求失败时打印的异常的信息
System.out.println(r.toString()); try { //响应的文本信息
System.out.println(r.bodyString());
} catch (QiniuException e1) { //ignore
}
}
} /** * 上传文件 * @param file byte * @param key 文件名 * @throws Exception */
public void uploadFile(byte[] file,String key) throws Exception{ new QiniuUtils().upload(file,key);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
ACCESS_KEY和SECRET_KEY在七牛的个人中心里。
填写代码中即可。实际编写时可根据需要将该方法修改为静态方法方便调用。
7.编写controller的代码
@RequestMapping(value = "/config") public void config(HttpServletRequest request, HttpServletResponse response) {
response.setContentType("application/json");
String rootPath = request.getSession()
.getServletContext().getRealPath("/"); try {
String exec = new ActionEnter(request, rootPath).exec();
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
} /** * 多文件上传支持 * @param upfile * @return * @throws Exception */
@ResponseBody
@RequestMapping(value = "uploadfile") public Map uploadFile(@RequestParam(value = "upfile", required = false) MultipartFile[] upfile) throws Exception{
Map<String,String> map = new HashMap<String, String>(); if (upfile != null && upfile.length > 0){ //循环获取file数组中得文件
for(int i = 0;i<upfile.length;i++){
MultipartFile file = upfile[i];
String fileName = file.getOriginalFilename(); byte[] fileByte = file.getBytes(); //返回对象
System.out.println("上传文件"+fileName); try { new QiniuUtils().uploadFile(fileByte,fileName);
map.put("url",fileName);
map.put("name",fileName);
map.put("state","SUCCESS");
}catch (Exception e){
e.printStackTrace();
map.put("state","上传失败!");
}
}
} return map;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
整合完成，可以进行测试了。
这里就不继续贴测试的图片了，大家自行测试。
工程文件由于在正式的项目中所以不能共享给大家，如果需求比较大的话，下来我整理一个上传到github供大家使用
以上是关于ueditor采用Spring MVC的方式整合七牛云实现上传图片视频附件等的主要内容，如果未能解决你的问题，请参考以下文章
Spring MVC Spring MyBatis 整合 - 快速上手
Spring MVC Spring MyBatis 整合 - 快速上手
SpringBoot系列七：SpringBoot 整合 MyBatis（配置 druid 数据源配置 MyBatis事务控制druid 监控）