百度编辑器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;
        }
    }

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,969评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,436评论 25 708
  • 161117 完成finance的一天,从图书馆辗转回家,四个女生坐在餐厅排版,互相修改对方的语法错误。不过写过好...
    XxXxXxN阅读 236评论 2 1
  • 今天还没下班儿的时候,儿子就给我打电话说,没有新的四线方格本儿了,以前的那些都用过了,老师说要用新的。纠结着,等着...
    硕宝_202d阅读 284评论 0 0
  • "现在宣布一个好消息,这次物理竞赛的全校第一名在咱们班,而且是一名女生。" 早晨第二节课,物理老师一走上讲台就高兴...
    踏雪无恒终有痕阅读 215评论 0 1