百度编辑器Ueditor自定义图片上传路径，调用自定义图片上传接口

百度编辑器插入图片后会上传到指定地址，并且返回一个图片链接，下面介绍配置方式以及图片接收接口的编写。

1、前端百度编辑器配置图片上传路径js代码：

/**
 * <pre>
 * 创建UEditor
 * 要引入UEditor,请在页面中加入如下代码：
 * <script id="editor" type="text/plain" style="width: 96%; height: 259px;">${pd.content }</script>
 * </pre>
 */
function ueditor(basePath){
    UE.getEditor('editor');
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
            return basePath + 'qiniu/uploadimage';//此处写自定义的图片上传路径
        } else if (action == 'uploadvideo') {
            return 'http://a.b.com/video.php';
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }
}

2、图片接收接口代码，要特别注意接口传入参数以及返回参数格式

/**
     * 图片上传接口,主要是用于UEditor图片上传,并且返回对应的数据格式
     * @author 北北
     * @date 2017年9月10日上午9:33:06
     * @param upfile
     * @return
     */
    @RequestMapping(value = "/uploadimage", method = RequestMethod.POST)
    @ResponseBody
    public Map<String, String> uploadimage(@RequestParam(value = "upfile") MultipartFile[] upfile) {
        Map<String, String> map = new HashMap<>();
        List<String> picUrls;
        try {
            picUrls = filesService.uploadPics(upfile);
            map.put("url", picUrls.get(0));
            map.put("state", "SUCCESS");
            map.put("original", "");
            return map;
        } catch (Exception e) {
            logger.error("uploadimage", e);
            return map;
        }
    }

最后需要说明的是百度编辑器不管是单张插入图片还是批量插入图片，其上传时候都是每张图片调用一次上传接口的，因此图片接收接口只需要单张图片处理就可以了。