Spring Boot集成百度Ueditor

Posted 2020-10-12 Mr、Guo

遇到的问题：

　　1.将ueditor加入/static目录下，能正常显示，但是出现“请求后台配置项http错误，上传功能将不能正常使用！”（解决在下面，都是自定义上传的，如果需要官方的示例，我也无能为力，没搞出来........）

　　2.解决问题一后，出现“上传失败”（解决在下面，同上）

默认情况下上传图片时的请求过程：

　　首先，初始化Ueditor插件时，在ueditor.all.js的大约8200行左右有一个请求配置文件内容的request。请求的是ueditor.config.js中serviceUrl的服务器路径，即请求的是/jsp/controller.jsp文件。他返回的内容是/jsp目录下的config.json文件的内容。如果这里请求错误，前端控制台会打印“请求后台配置项http错误，上传功能将不能正常使用！”的错误。

　　其次，当我们上传图片时，图片的请求路径、保存的地址都在/jsp目录的下config.json文件中。请求成功时将返回类似如下json数据

{
    "state": "SUCCESS",
    "url": "upload/demo.jpg",
    "title": "demo.jpg",
    "original": "demo.jpg"
}

　　这就为我们自定义上传返回提供了思路，也就是下面的步骤。

第一步：下载Ueditor，地址：http://ueditor.baidu.com/build/build_down.php?n=ueditor&v=1_4_3_3-utf8-jsp 完成后将文件夹名改为ueditor，方便一些，然后复制此文件夹到Spring Boot项目的/resources/static目录下。

第二步：修改文件上传配置路径

　　打开ueditor目录下的ueditor.config.js文件，修改serverUrl路径，未修改情况下，将请求ueditor/jsp/controller.jsp。他返回当前目录的conf.json的内容。我们要模拟出

此内容。

由原来的
 serverUrl: URL+"jsp/controller.jsp"
改为我们自己的
 serverUrl: "http://localhost:8080/ueditor/"

　　然后编写comtroller处理请求，后台ueditor如下：（我删除了用不到的视频、涂鸦什么的，只留下了图片的）将/jsp/config.json中的内容复制到字符串中，然后返回即可，注意的是先写String s="";然后在双引号内粘贴，这样会自动将粘贴板中的双引号加入反斜杠。

@RequestMapping(value = "/ueditor")
@ResponseBody
public String ueditor(HttpServletRequest request, HttpServletResponse response) {

    String s = "{\n"+
           "            \"imageActionName\": \"uploadimage\",\n" +
           "                \"imageFieldName\": \"file\", \n" +
           "                \"imageMaxSize\": 2048000, \n" +
           "                \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], \n" +
           "                \"imageCompressEnable\": true, \n" +
           "                \"imageCompressBorder\": 1600, \n" +
           "                \"imageInsertAlign\": \"none\", \n" +
           "                \"imageUrlPrefix\": \"\",\n" +
           "                \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\" }";
    return s;

}

　　这样我们请求过程的第一步完成，接下来我们需要自定义上传图片的处理逻辑。首先，按照官方文档的写法http://fex.baidu.com/ueditor/#qa-customurl，要在使用插件的index.html中的修改action Url，方法如下

<script type="text/javascript">
    var ue = UE.getEditor(‘container‘);
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        if (action == ‘uploadimage‘ || action == ‘uploadscrawl‘ || action == ‘uploadimage‘) {
            return ‘http://localhost:8080/imgUpdate‘; //在这里返回我们实际的上传图片地址
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }
</script>

　　其后台的imgUpdate如下：

@RequestMapping(value = "/imgUpdate")
@ResponseBody
public String imgUpdate(MultipartFile file) {
    if (file.isEmpty()) {
        return "error";
    }
    // 获取文件名
    String fileName = file.getOriginalFilename();
    // 获取文件的后缀名
    String suffixName = fileName.substring(fileName.lastIndexOf("."));
    // 这里我使用随机字符串来重新命名图片
    fileName = Calendar.getInstance().getTimeInMillis() + Randoms.getRandomStringLower(4) + suffixName;
    // 这里的路径为nginx的代理路径，这里是/data/images/xxx.png
    File dest = new File(ConstantL.IMAGE_UPDATE_PATH + fileName);
    // 检测是否存在目录
    if (!dest.getParentFile().exists()) {
        dest.getParentFile().mkdirs();
    }
    try {
        file.transferTo(dest);
        //url的值为图片的实际访问地址 这里我用了Nginx代理，访问的路径是http://localhost/xxx.png
        String config = "{\"state\": \"SUCCESS\"," +
                "\"url\": \"" + ConstantL.BASE_URL + fileName + "\"," +
                "\"title\": \"" + fileName + "\"," +
                "\"original\": \"" + fileName + "\"}";
        return config;
    } catch (IllegalStateException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }
    return "error";
}

　　这里返回值是参照文档中的http://fex.baidu.com/ueditor/#dev-request_specification.需要注意的是，mgUpdate方法里面的参数名称一定要与ueditor方法中字符串s中的imageFieldName值相同，都是file，不然会报空指针异常。

这样，应该就可以上传了。