ueditor上传文件七牛云

准备工作

ueditor插件:百度云下载资源: https://pan.baidu.com/s/1EL_hoJGTyZEf49WX0KQfvA

Ueditor下载官网https://ueditor.baidu.com/website/download.html

第一 导入Maven项目中

第二 创建访问编辑器的controller

package cn.itsource.controller;
import java.util.HashMap;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.qiniu.util.Auth;
@Controller
public class IndexController {
//访问文本编辑页面
@RequestMapping("/ueditor")
public String ueditorPage() {
return "ueditor";
}
}

第三 ueditor前台

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

第四 配置application.yml/等于application.xml,注意结构层次

#设置端口
server:
  port:8080
#设置上传文件大小
spring:
  http:
    multipart:
      maxFileSize: 100Mb
      maxRequestSize: 1000Mb
  #设置视图解析器
  mvc:
    view:
      prefix: /WEB-INF/jsp/
      suffix: .jsp
#日志打印
logging:
  level:
    cn:
      itsource: DEBUG
#七牛云配置 上传凭证AccessKey，SecretKey和Bucket
qiniu:     
     accessKey: P63Fl_oUacfVwpMGuiR826rc7byWqwqyy_OBIVm3
     secretKey: yL_Uk2M3b68aM96ZC2dW-F8eir0R2Vuq5vE9wItz
     domain: http://pi5zfw3xm.bkt.clouddn.com/
     bucket: testdemo

第五 后台处理

// 获取上传凭证
@RequestMapping("/uploadimages")
@ResponseBody
public Object uploadImage(MultipartFile upfile) {
    // ...生成上传凭证，然后准备上传
    Map 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(accessKey, secretKey);
    String upToken = auth.uploadToken(bucket);
try{
    Response response = uploadManager.put(upfile.getBytes(), newFileName, upToken);
    // 解析上传成功的结果
    /* DefaultPutRet putRet = new Gson().fromJson(response.bodyString(),         
      DefaultPutRet.class);
        System.out.println(putRet.key);
        System.out.println(putRet.hash);*/
        map.put("state","SUCCESS");
        map.put("url",domain+newFileName);
        map.put("title",newFileName);
        map.put("original",newFileName);
    }catch(Exception ex){
        System.out.println("上传失败"+ex.getMessage());
        map.put("state","ERROR");
        map.put("url","");
        map.put("title","");
        map.put("original","");
    }
        return map;
}

第六 注意:其实百度的ueditor官网是提供了上传文件到七牛云的官方文档的,文档最后面有介绍,网上修改ueditor源码不建议采用;

如何自定义请求地址

本文档说明修改请求地址的方法。

应用场景

ueditor 1.4.2+ 推荐使用唯一的请求地址，通过GET参数action指定不同请求类型。 但很多用户都希望使用自己写好的上传地址，下面提供一种解决方法： 由于所有ueditor请求都通过editor对象的getActionUrl方法获取请求地址，可以直接通过复写这个方法实现，例子如下：s._bkGetActionUrl.call(this, action);

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名称
• uploadscrawl：//执行上传涂鸦的action名称
• uploadvideo：//执行上传视频的action名称
• uploadfile：//controller里,执行上传视频的action名称
• catchimage：//执行抓取远程图片的action名称
• listimage：//执行列出图片的action名称
• listfile：//执行列出文件的action名称