Java——Ueditor自定义图片上传接口和路径，以及各种小问题

页面中我们有时候需要图文编辑来记录用户的多样化输入，所以不得不用到富文本编辑器，Ueditor是个不错的选择，不过它的图片上传功能有很多的坑需要注意，在这里我做一个详细的记录~

由于它的图片上传有点坑，所以这里我自定义了一个图片上传接口来代替它原有的~

首先把静态资源包导入到项目中

点击下载(不知为何设置不了积分，大家可以去官网下载)

有很多小伙伴可能会出现这种情况：

这可能是你忘了导入jar包或者依赖引起的，或者是你的配置有问题，重点放在下图的俩文件中

 

一般没有什么改动并且导入了依赖是不会出现这个情况的~

maven依赖:

    <dependency>
            <groupId>cn.songxinqiang</groupId>
            <artifactId>com.baidu.ueditor</artifactId>
            <version>1.1.2-offical</version>
        </dependency>

接下来讲重点，如何在Ueditor中使用自定义的图片上传接口？

如果你前面已经没什么问题了，那么就可以开始下面的步骤了

首先需要在页面的js中定义上传图片的接口，页面就是你富文本的页面，不要想的太复杂~

拷贝进去修改一下接口地址就行~

     UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
        UE.Editor.prototype.getActionUrl = function(action) {
            if (action == 'uploadimage' || action == 'uploadscrawl') {
                return 'http://localhost:8080/ueditor/uploadimage';//这就是自定义的上传地址
            } else if (action == 'uploadvideo') {
                return '';
            } else {
                return this._bkGetActionUrl.call(this, action);
            }
        }

然后写一个对应的上传图片接口，如下：

@RequestMapping(value = "/uploadimage", method = RequestMethod.POST) 
    @ResponseBody 
    public Map<String, String> uploadimage(@RequestParam(value = "upfile") MultipartFile upfile) { 
        Map<String, String> map = new HashMap<>();
        String fileName=upfile.getOriginalFilename();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
        String filename = sdf.format(new Date()) + new Random().nextInt(1000);
        String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
        filename=filename+"."+fileExt;//存入虚拟目录后的文件名
        File uploadedFile = new File("D:\\file\\image", filename);//存入虚拟目录后的文件
        try {
            upfile.transferTo(uploadedFile);//上传
            map.put("url", "/image/"+filename);//这个url是前台回显路径（回显路径为config.json中的imageUrlPrefix+此处的url）
            map.put("state", "SUCCESS");
            map.put("original", "");
        } catch (IllegalStateException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return map;
    }

大家只需要拷贝进项目然后修改一下接口中的地址以及 config.json中的imagePathFormat 即可！

其实只要你能在Ueditor上传图片的时候跳转到自定义的那个接口，你就以及成功百分之九十了，剩下的只是调整路径做回显

大家可以按f12在上传图片的时候看看上传与返回的路径，然后对应你自己的路径修改即可！

亲测结果：

 

The end！！！