Spring Boot项目百度UEditor上传图片

业务背景

• spring boot项目
• 实现富文本框
• 上传图片到富文本框中，可新增、编辑
• 图片保存在独立的FastDFS服务器上

开发步骤

下载源码

• UEditor官网下载地址
• 我下载的版本是【1.4.3.3 Jsp 版本】UTF-8版

将源码放到项目指定位置

• 示例如下
  

加入指定JAR依赖

• 具体JAR在 \ueditor\jsp\lib 下
• POM文件中示例【即ueditor-1.1.2.jar】

<!-- https://mvnrepository.com/artifact/cn.songxinqiang/com.baidu.ueditor -->
<dependency>
    <groupId>cn.songxinqiang</groupId>
    <artifactId>com.baidu.ueditor</artifactId>
    <version>1.1.2-offical</version>
</dependency>

源码重要介绍

• ueditor/ueditor.config.js
  

• /ueditor/jsp/config.json
  

• ueditor/jsp/controller.jsp
  

后端请求规范

• 文档详情

• 图片上传完成时，为使得图片在富文本框中成功回显，上传方法返回的JSON数据格式必须和官方文档规定的保持一致，格式如下

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

覆盖默认的请求地址

action的配置对应【 /ueditor/jsp/config.json】中的 “imageActionName”: “uploadimage”, /* 执行上传图片的action名称 */

UE.Editor.prototype.getActionUrl = function(action) {
    // 这里很重要，很重要，很重要，要和配置中的imageActionName值一样
    if (action == 'uploadimage') { 
        // 这里调用后端我们写的图片上传接口
        return 'commonQuestionsQuery/uploadImageData';
    } else {
        return this._bkGetActionUrl.call(this, action);
    }
} 

后台代码

• 类UeditorImage源码

package com.sto.customerapp.entity;

public class UeditorImage {
    private String state; 
    private String url; 
    private String title; 
    private String original; 

    public String getState() {
        return state;
    }
    public void setState(String state) {
        this.state = state;
    }
    public String getUrl() {
        return url;
    }
    public void setUrl(String url) {
        this.url = url;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getOriginal() {
        return original;
    }
    public void setOriginal(String original) {
        this.original = original;
    }


}

• Handler中源码

@RequestMapping("/uploadImageData")
@ResponseBody
public String uploadImageData(HttpServletRequest request) {
    Gson gson = new Gson();
    UeditorImage msg = uploadFile(request);
    return gson.toJson(msg);
}

private UeditorImage uploadFile(HttpServletRequest request) {
    UeditorImage image = new UeditorImage();
    List<MultipartFile> files = ((MultipartHttpServletRequest) request).getFiles("upfile");
    try {
        String fileName = files.get(0).getOriginalFilename();
        logger.info("接收到上传数据，图片名称为 ：" + fileName);
        String path = fastdfsClient.uploadFile(files.get(0), "", false);
        logger.info("图片上传成功,上传路径为 ：" + serverPath + path);


        image.setUrl(serverPath + path);
        image.setState("SUCCESS");
        image.setOriginal(fileName);
        image.setTitle(fileName);

    } catch (IOException e) {
        e.printStackTrace();
        logger.error("图片上传失败，失败原因:" + e.getMessage());
        image.setState("FAIL");
    }
    return image;
}