Ueditor百度富文本编辑器前后端配置自己的上传接口

不得不吐槽一下这个巨坑。既然踩过一次，那就记录下来。废话不多说直接说如何做吧
1.在官网下载你需要的版本ueditor

QQ截图20180719164723.png
2.下载完之后解压。解压得到的文件除了jsp里面的其他的都是前端需要的。因为我们是前后端分离，所以jsp属于后台的东西自然不放在前端了

3.先来说说后端该如何配置吧。后端源码，前端代码。

4.配置后台。直接将后台代码下载下来。添加到我们自己的项目中即可。在我们的controller层需要加上如下代码

**

* 用于读取Ueditor中的后台配置config.json

* @author zhangws

* @date 2018-7-20

*

*/

@RestController

@CrossOrigin

@RequestMapping("/ueditor")

public class UeditorController {

@RequestMapping(value ="/exec")

@ResponseBody

  public String exec(HttpServletRequest request)throws UnsupportedEncodingException{

      request.setCharacterEncoding("utf-8");

        String rootPath = request.getRealPath("/");

        return new ActionEnter( request, rootPath ).exec();

  }

}

例如我自己调用这个链接http://xxx.xxx.xxx.xxx:9004/ueditor/exec?action=config
如果页面返回配置文件的json那说明后台配置成功
5.后台配置成功后那么我们在前端页面中找到ueditor.config.js文件
修改如下：

 var URL = window.UEDITOR_HOME_URL || getUEBasePath();

    /**
     * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
     */
    window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释
        UEDITOR_HOME_URL: URL

        // 此处换成我们自己的controller即可，其实这个作用就是用来调用config.json的
        , serverUrl: "http://xxx.xxx.xxx.xxx:9004/ueditor/exec"

其次就到了如何在上传的时候调用我们自己的上传接口，只需要在前端实例化Ueditor的时候重写一下方法即可。代码如下

    UE.getEditor('editor');
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        console.log(action);
        if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
            return 'http://xxx.xxx.xxx.xxx:9005/seller/goods/uploadGoodsPic.do';//此处写自定义的图片上传路径
        } else if (action == 'uploadvideo') {
            return 'http://a.b.com/video.php';
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }

后台上传接口如下：

 @ResponseBody
    @RequestMapping(value = "/goods/uploadGoodsPic.do", method = RequestMethod.POST)
    public GanjieResponse<AttachmentModel> uploadGoodsPic(@RequestParam(value = "upfile") MultipartFile upfile) {
        if (upfile == null) {
            return new GanjieResponse<>(Constant.ERRCODE, "上传附件为空");
        }
        try {
            InputStream ins = upfile.getInputStream();
            int size = ins.available();
            if (size <= 0) {
                return new GanjieResponse<>(Constant.ERRCODE, "文件内容为空");
            }
            String fileName = upfile.getOriginalFilename();
            return goodsManager.uploadFile(ins, fileName);
        } catch (IOException e) {
            LOGGER.error("FileItem.getInputStream() error", e);
            return new GanjieResponse<>(Constant.ERRCODE, "获取输入流异常");
        }
    }

上面切记入参的时候参数名应该跟后台config.json的 imageFieldName 的值一致也就是"upfile",因为前端传值的时候是以这个表单的名字提交的。不然就没东西过来了。
``

"imageActionName": "uploadimage", /*uploadimage 执行上传图片的action名称 */

"imageFieldName": "upfile", /* 提交的图片表单名称 */

"imageMaxSize": 2048000, /* 上传大小限制，单位B */

``