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

最新推荐文章于 2025-08-06 11:25:04 发布

原创最新推荐文章于 2025-08-06 11:25:04 发布 · 6.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#七牛 #spring mvc #云计算 #ueditor

云计算同时被 3 个专栏收录

3 篇文章

订阅专栏

spring mvc

1 篇文章

订阅专栏

七牛

1 篇文章

订阅专栏

本文介绍如何将百度的UEditor与七牛云存储结合使用，实现图片、视频等文件的上传功能，并提供具体实现步骤及代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 文件

这里根据需要进行修改，对应的路径前缀在准备上传到的七牛的存储空间的访问域名，如图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GT8IdJMn-1630317714143)(http://oc6wx6mm4.bkt.clouddn.com/14716662365964.jpg)]
如果开启了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的源代码，因为要修改一个文件。目录结构如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VLgWyUkQ-1630317714145)(http://oc6wx6mm4.bkt.clouddn.com/14716688083668.jpg)]

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在七牛的个人中心里。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sM5Nc618-1630317714148)(http://oc6wx6mm4.bkt.clouddn.com/14716693743587.jpg)]
填写代码中即可。实际编写时可根据需要将该方法修改为静态方法方便调用。

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