ueditor+requirejs+springMVC+七牛（富文本编辑器图片上传到指定服务器）

为了能较少引用js，提高页面加载速度，requirejs逐渐流行起来。本文是requirejs和当下主流插件结合的使用总结。

其中：富文本编辑器是百度的UEditor，MVC框架是java开发最流行的SpringMVC，服务器是小用户使用较多的七牛云（跟阿里云等没法比，但是很经济实惠才是硬道理），不多说，写下自己能使用的解决方案，以备将来之用，也给别人送支玫瑰。

一、requirejs配置文件引入ueditor：

// 配置依赖
require.config({
    baseUrl: '/lib',
    paths: {
        'ueditor': 'ueditor/ueditor.all.min',
        'ueditor.config': 'ueditor/ueditor.config',
        'ZeroClipboard' : 'ueditor/third-party/zeroclipboard/ZeroClipboard'
    },
    shim: {
        'ueditor': {  deps: ['ueditor.config'] }
    }
});
// 主函数
require([ 'ZeroClipboard',  'ueditor'], function (ZeroClipboard) {
     // 初始化ZeroClipboard，此处一定要有，不然会报错
     window['ZeroClipboard'] = ZeroClipboard;
	……
});

二、ueditor.config.js配置

其中的window.UEDITOR_HOME_URL必须有，配置为相对路径即可。

imageUrl配置为自己的后台处理接口。

三、后台接口代码：

    private final static String[] imageAllowFiles = { ".jpg",".jpeg",".png" };

   /**
     * UEditor上传配置
     *
     * @return
     */
    @RequestMapping("/ueditor/config")
    @ResponseBody
    public Map<String, Object> upload(String action,
                                      @RequestParam(required = false, value = "image") CommonsMultipartFile image) throws IOException {
        long imageMaxSize = 2048000L; //上传大小限制，单位B
        Map<String, Object> resultMap = new HashMap<>();

        // ueditor请求后台配置时的相应函数
        if (StringUtils.isNotBlank(action) && action.equals("config")) {

            resultMap.put("imageActionName", "uploadimage"); // 上传图片的action

            // 这个配置是ueditor上传文件的name属性
            resultMap.put("imageFieldName", "image");
            resultMap.put("imageMaxSize", imageMaxSize);
            resultMap.put("imageAllowFiles", imageAllowFiles);//必须指定，不然多图片上传时，会提示”文件格式不允许”
            resultMap.put("imageUrlPrefix", "");
            resultMap.put("state", "SUCCESS");
        } else {
            if (null == image) {
                resultMap.put("state", "上传失败，上传的图片为空");
            } else {
                String imgName = image.getOriginalFilename();
                String type = imgName.lastIndexOf(".") == -1 ? "" : imgName.substring(imgName.lastIndexOf("."));
                resultMap.put("original", image.getOriginalFilename());
                resultMap.put("type", type);
                if (!checkImageType(imgName)) {
                    resultMap.put("state", "上传失败,目前支持" + Arrays.toString(imageAllowFiles) + "类型的图片");
                } else {
                    long size = image.getSize();
                    resultMap.put("size", size);
                    if (size > imageMaxSize) {
                        resultMap.put("state", "上传失败，文件大小不能超过[" + (imageMaxSize / 1024 / 1024) + "]M");
                    } else {
                        resultMap.putAll(qiniuUtil.upLoadByte(image.getBytes(),type.toLowerCase()));
                        resultMap.put("state", "SUCCESS");
                    }
                }
            }
        }
        return resultMap;
    }

    /**
     * 判断文件名称是否是允许的文件类型
     *
     * @param fileName
     * @return
     */
    private boolean checkImageType(String fileName) {
        if (StringUtils.isBlank(fileName)) {
            return false;
        }
        int i = fileName.lastIndexOf(".");
        if (i == -1) {
            return false;
        }
        String type = fileName.substring(i);

        for (String ext : imageAllowFiles) {
            if (ext.equalsIgnoreCase(type)) {
                return true;
            }
        }
        return false;
    }

四、Ueditor选择图片弹出选择框过慢

这个是因为没有指定可接受图片类型，将所引用的ueditor.all.js(或ueditor.all.min.js，看引用的是哪一个)中的接受类型由”image/*”改为自己需要的类型，以下是我修改后的。

五、备注

1：代码中涉及的util需要自己定义；

2：本文是将图片直接上传到七牛云，所以需要自己拼接返回前端的参数。

3：前端需要参数如下：

"state"=> "", //上传状态，上传成功时必须返回"SUCCESS"

"url"=> "", //返回的地址

"title"=> "", //新文件名

"original"=> "", //原始文件名

"type"=> "" //文件类型

"size"=> "", //文件大小

4：七牛上传代码如下，其中返回了前端需要的url和title。

	public Map<String,Object> upLoadByte(byte[] data, String type){
		Map<String, Object> res = new HashMap<>();
		String key = getKey()+type;
		Configuration cfg = new Configuration(Zone.autoZone());
		UploadManager uploadManager=new UploadManager(cfg);
		try {
			Response response= uploadManager.put(data, key, getUpToken());
			if (response.isOK()){
				res.put("url",domain+"/"+key);
				res.put("title",key);
			}
		} catch (QiniuException e) {
			Response r = e.response;
			System.err.println(r.toString());
		}
		return res;
	}

5:切记（提醒自己和七牛使用者）

七牛7.2.2以上java-sdk版本才有

Configurationcfg = new Configuration(Zone.autoZone());

         UploadManageruploadManager=new UploadManager(cfg);

低版本没有Configuration，不可用。如果直接使用无参构造定义UploadManager uploadManager=new UploadManager();会出现初始化错误。