Spring Boot项目百度UEditor上传图片

﹏ヽ暗。殇╰゛Y 2022-05-18 07:57 236阅读 0赞

## 业务背景 ##

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

## 开发步骤 ##

### 下载源码 ###

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

### 将源码放到项目指定位置 ###

*  示例如下  
    ![这里写图片描述][70]

### 加入指定JAR依赖 ###

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

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

### 源码重要介绍 ###

*  ueditor/ueditor.config.js  
    ![这里写图片描述][70 1]
 *  /ueditor/jsp/config.json  
    ![这里写图片描述][70 2]
 *  ueditor/jsp/controller.jsp  
    ![这里写图片描述][70 3]

### 后端请求规范 ###

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

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

### 覆盖默认的请求地址 ###

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

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    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;
    }

[UEditor]: http://ueditor.baidu.com/website/download.html
[70]: /images/20220518/55bedb4e8933421b9da1f6c360f8394a.png
[70 1]: /images/20220518/745a3163fd824c2991d75ad520341ebb.png
[70 2]: /images/20220518/8c9e1349854f4db2901432d3c0030628.png
[70 3]: /images/20220518/05ed37ca900a47b38b1d5f0fca990cbf.png
[Link 1]: http://fex.baidu.com/ueditor/#dev-request_specification