ueditor采用Spring MVC的方式整合七牛云实现上传图片、视频、附件等

来源：互联网发布：淘宝旺旺名字怎么改编辑：程序博客网时间：2024/05/29 03:15

ueditor采用Spring MVC的方式整合七牛云实现上传图片、视频、附件等

如今使用云计算需求的人员越来越多，最近用到富文本编辑器，使用了百度的ueditor，由于文章中有上传图片和视频的需求，所以选择了目前比较好的七牛云存储，下面开始演示怎么将ueditor和七牛结合起来使用。

思路

先说下大体思路：

根据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);    }}

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>

修改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>

4.引入ueditor的java代码
在这里建议引入ueditor的源代码，因为要修改一个文件。目录结构如下：

5.修改ConfigManager
打开ueditor源代码的ConfigManager，找到getConfigPath方法，修改为：

    private String getConfigPath () {        return this.rootPath                + File.separator + "static/ueditor/jsp"                + File.separator + ConfigManager.configFileName;    }

"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);    }}

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;    }

整合完成，可以进行测试了。
这里就不继续贴测试的图片了，大家自行测试。
工程文件由于在正式的项目中所以不能共享给大家，如果需求比较大的话，下来我整理一个上传到github供大家使用。

1 0