UEditor进阶：修改图片上传的方式（JSP版）

当大家使用了UEditor之后，会发现其自带的图片上传方法只能存在项目当中，每当项目重新发布，之前的数据就无法自动保存。这个时候就需要我们修改图片上传方式，将图片保存在数据库或电脑的其他地方，从而解决这个问题。
如果大家研究的仔细的话，利用chrome浏览器F12中有一个Network功能，能看到一次加载的所有网址。当大家在进行图片上传时，UEditor会自动执行`controller.jsp?action=upload`这个方法。其实从config.json中也可以看出，其中有这么一句话：

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

因此我们的思路就是让它不执行这个action，转而执行我们需要的action，解决方法如下：

1、jsp页面上需要修改的地方

在你的页面代码中应该有类似这样的话：

var ue = UE.getEditor('editor',{});

在下面加上：

UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl;
        UE.Editor.prototype.getActionUrl=function(action){
            if (action == 'uploadimage'){
                return 'action';    /* 这里填上你自己的上传图片的action */
            }else{
                return this._bkGetActionUrl.call(this, action);
            }
        };

2、action的修改方法

先看一下官方开发文档给出的后端请求规范，里面有设计到uploadimage的传值规范：
![这里写图片描述](https://img-blog.csdn.net/20161116200623502)
因此，我们传值的必须包含state、url、title、original四个部分（state如果不是success的话，前端的报错信息就会显示state里包含的内容，因此大家在写的的时候可以在此注意）
我用的是SpingMVC框架，后端的处理是利用controller，返回值则是Map即可：

    @RequestMapping(value = "/action", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
    @ResponseBody
    public Map<String,Object> save(HttpServletRequest req){
        Map<String,Object> rs = new HashMap<String, Object>();
        MultipartHttpServletRequest mReq  =  null;
        MultipartFile file = null;
        InputStream is = null ;
        String fileName = "";
        // 原始文件名   UEDITOR创建页面元素时的alt和title属性
        String originalFileName = "";
        String filePath = "";
        try {
            mReq = (MultipartHttpServletRequest)req;
            // 从config.json中取得上传文件的ID
            file = mReq.getFile("upfile");
            // 取得文件的原始文件名称
            fileName = file.getOriginalFilename();
            originalFileName = fileName;
            /*你的处理图片的代码*/
            rs.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
            rs.put("url",icon);         //能访问到你现在图片的路径
            rs.put("title", originalFileName);
            rs.put("original", originalFileName);                       

        } catch (Exception e) {
            log.error(e.getMessage(),e);
            rs.put("state", "文件上传失败!"); //在此处写上错误提示信息，这样当错误的时候就会显示此信息
            rs.put("url","");
            rs.put("title", "");
            rs.put("original", "");
        }
        return rs;
    }

3、修改config.json

因为现在你的上传图片的方式已经改变了，并不是用UEditor原生自带的方式，因此需要修改将“imageUrlPrefix”设置为空，不需要任何前缀，你自己已经给出了url（如果你给出的url缺少前缀的话，可以继续在这里添加）。

至此便大功告成，如果大家还有什么问题，欢迎留言，大家可以一起讨论。