ueditor上传文件到七牛云坑爹录

来源：互联网发布：域名注册了怎么用编辑：程序博客网时间：2024/06/07 10:08

最近用了一下ueditor，版本是1.4.3，上传文件要上传到七牛，网上能找到的都是基于比较较旧的版本写的，比较痛苦，找半天也找不到一个可以参考的，百度的开源项目代码烂码农兄弟们大多心里是有数了的，就不多说了，坑都给坑到没了。

不多说，下面开始哈。

UEditor分为后端配置和前端配置

首先建议去下载它的源码来用，千万不要用百度打好的，下好源码后就放到你的项目里，包括两个部分，java和js

然后找到jsp里的config.json

这个文件找到以下这么一段描述，修改图片访问路径前缀为http://omf8899s1.bkt.clouddn.com/

/* 上传图片配置项 */"imageActionName": "uploadimage", /* 执行上传图片的action名称 */"imageFieldName": "upfile", /* 提交的图片表单名称 */"imageMaxSize": 2048000, /* 上传大小限制，单位B */"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */"imageCompressEnable": true, /* 是否压缩图片,默认是true */"imageCompressBorder": 1600, /* 图片压缩最长边限制 */"imageInsertAlign": "none", /* 插入的图片浮动方式 */"imageUrlPrefix": "http://omf8899s1.bkt.clouddn.com/", /* 图片访问路径前缀 */

然后找到ConfigManager.java这个类是管理加载你的配置信息的，也就是加载JSP下的config.json，死烂百度原来的代码是像下面这样的，死活都加载不了，然后报错。。。。

所以一定要修改正确这个配置文件加载路径

原来的如下：

/* * 通过一个给定的路径构建一个配置管理器， 该管理器要求地址路径所在目录下必须存在config.properties文件 */private ConfigManager ( String rootPath, String contextPath, String uri ) throws FileNotFoundException, IOException {      rootPath = rootPath.replace( "\\", "/" );      this.rootPath = rootPath;   this.contextPath = contextPath;      if ( contextPath.length() > 0 ) {      this.originalPath = this.rootPath + uri.substring( contextPath.length() );   } else {      this.originalPath = this.rootPath + uri;   }      this.initEnv();   }

修改后的：

/* * 通过一个给定的路径构建一个配置管理器， 该管理器要求地址路径所在目录下必须存在config.properties文件 */private ConfigManager ( String rootPath, String contextPath, String uri ) throws FileNotFoundException, IOException {   //rootPath = rootPath.replace( "\\", "/" );   //rootPath = rootPath.replace( "\\", File.separator );   this.rootPath = rootPath;   this.contextPath = contextPath;   if ( contextPath.length() > 0 ) {      this.originalPath = this.rootPath + File.separator + "jsp" + File.separator + "config.json";   } else {      this.originalPath = this.rootPath + uri;   }   this.initEnv();}

然后我们再来看看这个配置文件，ConfigManager.java其实就是加载这个配置文件的，不加载是用不了的，而ConfigManager中的加载路径又不对，这是坑之一，最大的坑，是用来坑爹用的！！！

然后我们再来写上传文件的接口

package com.canplay.ryf.controller;import java.io.UnsupportedEncodingException;import java.util.HashMap;import java.util.Map;import javax.servlet.ServletContext;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.json.JSONException;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import com.canplay.ryf.base.ResultBean;import com.canplay.ryf.service.IImageService;import com.canplay.ryf.ueditor.ActionEnter;import com.canplay.ryf.util.QiniuUtils;import com.canplay.url.UrlCommand;/** *  * @author mac * 管理员后台 */@Controllerpublic class UploadController {      private boolean isTest = true;   private Logger logger = LoggerFactory.getLogger(getClass());      @Autowired   private QiniuUtils qiniu;          @Autowired   private IImageService imageService;       /**    * 获取七牛TOKEN    *     * @param request    * @param response    * @return    */   @RequestMapping(value = "getQiNuToken")   @ResponseBody   public ResultBean getQiNuToken(HttpServletRequest request, HttpServletResponse response) {      ResultBean ret = new ResultBean();      try {         String token = qiniu.getUpToken();         ret.setData(token);         ret.setSuccess(true);      } catch (Exception e) {         e.printStackTrace();         ret.setSuccess(false);      }      return ret;       }      /**    * 加载配置文件    * @param request    * @param response    * @return    * @throws JSONException     */   @RequestMapping(value = "editorConfig")   @ResponseBody    public String editor (HttpServletRequest request,HttpServletResponse response) throws JSONException {        try {            request.setCharacterEncoding("utf-8");            response.setHeader("Content-Type", "text/html");            ServletContext application = request.getServletContext();/**这里就是UE的JS根目录**/            String rootPath = application.getRealPath("/public/page/matchschool/3g/admin/ueditor");            String result = new ActionEnter(request, rootPath).exec();            return result;        } catch (UnsupportedEncodingException e) {            e.printStackTrace();        }        return "";    }      /**     * 多文件上传支持      * @param upfile     * @return     * @throws Exception     */    @ResponseBody    @RequestMapping(value = "uploadfile")    public Map uploadFile(@RequestParam(value = "upfile", required = false) MultipartFile[] upfile,@RequestParam(value = "ownerId", required = false) String ownerId) 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 {                    Map<String, Object> qiNunRetMap = new QiniuUtils().uploadFile(fileByte,fileName);                    imageService.insertImage(ownerId, qiNunRetMap.get("key")== null?"":qiNunRetMap.get("key").toString(), qiNunRetMap.get("hash")== null?"":qiNunRetMap.get("hash").toString(), 1);                    map.put("url",fileName);                    map.put("name",fileName);                    map.put("state","SUCCESS");                }catch (Exception e){                    e.printStackTrace();                    map.put("state","上传失败!");                }            }        }        return map;    }   }

QiniuUtils.java

package com.canplay.ryf.util;import com.canplay.ryf.enums.QiniuBucket;import com.canplay.ryf.model.ImageEntity;import com.qiniu.common.QiniuException;import com.qiniu.http.Response;import com.qiniu.storage.UploadManager;import com.qiniu.util.Auth;import freemarker.core.Macro;import java.io.IOException;import java.util.HashMap;import java.util.Map;import javax.annotation.PostConstruct;import org.apache.commons.lang3.StringUtils;import org.springframework.beans.factory.annotation.Value;import org.springframework.stereotype.Component;import org.springframework.stereotype.Service;/** * Created by lyj on 2016/8/19. */@Servicepublic class QiniuUtils {    //设置好账号的ACCESS_KEY和SECRET_KEY    String ACCESS_KEY = "UFtCym3NVt2e5nZFIzTlqOYzrTGmJTzTPt9x5BD";    String SECRET_KEY = "N0lbgy8h7KyvkYQ2MIyfOWy9Bs0JP4hST2BMOpO";        //密钥配置    Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);    //创建上传对象    UploadManager uploadManager = new UploadManager();    //简单上传，使用默认策略，只需要设置上传的空间名就可以了    public String getUpToken(){       QiniuBucket.LIVE_IMG.getBucket();       auth.uploadToken(QiniuBucket.LIVE_IMG.getBucket());        return auth.uploadToken(QiniuBucket.LIVE_IMG.getBucket());    }    public Map<String, Object> upload(byte[] file,String key) throws IOException {       Map<String, Object> map = new HashMap<String,Object>();        try {            //调用put方法上传            Response res = uploadManager.put(file, key, getUpToken());            //打印返回的信息            System.out.println(res.bodyString());            if (StringUtils.isNotEmpty(res.bodyString())) {               map = JsonUtil.parseJSON2Map(res.bodyString());         }        } catch (QiniuException e) {            Response r = e.response;            // 请求失败时打印的异常的信息            System.out.println(r.toString());            try {                //响应的文本信息                System.out.println(r.bodyString());            } catch (QiniuException e1) {               e1.printStackTrace();            }        }        return map;    }    /**     * 上传文件     * @param file byte     * @param key 文件名     * @throws Exception     */    public Map<String, Object> uploadFile(byte[] file,String key) throws Exception{        return new QiniuUtils().upload(file,key);    }}

QiniuBucket.java

在七牛后台设置存储空间时会有下面的两个值的。

package com.canplay.ryf.enums;/** * RYF七牛对应的空间名 */public enum QiniuBucket {   /**    * 头像模块     */   LIVE_IMG("ry45617", "http://omf8899s1.bkt.clouddn.com/");   QiniuBucket(String bucket, String domain) {      this.bucket = bucket;      this.domain = domain;   }   private String bucket;   private String domain;   public String getBucket() {      return bucket;   }   public void setBucket(String bucket) {      this.bucket = bucket;   }   public String getDomain() {      return domain;   }   public void setDomain(String domain) {      this.domain = domain;   }}

要在前端页面使用，还要看一下ueditor.config.js，// 服务器统一请求接口路径
serverUrl:"/ryf/editorConfig" 对应的是 UploadController 的editor方法

前端html页面

<script type="text/javascript">var ownerId = "";$(document).ready(function() {   //随机生成一个所属ID给图片   ownerId = Math.floor(Math.random()*1000000+1)    //实例化编辑器    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 '/ryf/uploadfile?ownerId='+ownerId;        }else {            return this._bkGetActionUrl.call(this, action);        }    }        $('#btn').click(function(event) {        ue.ready(function(){        var html = ue.getContent();        var param= {            content : html,            ownerId : ownerId        }        $.ajax({                type: "post",                url: '/ryf/addLive',                data : param,                dataType: "json",                success: function(result) {                        if(result.success){                            alert('提交成功', -1);                            ue.execCommand('cleardoc');                        }                }          });             })    });    });</script>

如果在上传图片的同时提交其他参数，比如图片的ownerId，应该在URL后面加？直接拼，不要去修改UE的源码，吃力不讨好的，具体参考以下这行

/project/uploadfile.action?ownerId=

其次需要点明一下的是

uploadfile.action

对应的其实就是UploadController中的uploadFile方法。

1 0