Ueditor后端Spring Boot，以及前后端分离配置上传图片（超级易懂）

一、前言

我找了很多的ueditor富文本编辑器后端配置上传图片，我就说白话了，操蛋，网上写的真复杂，还下源码、改源码、源码代码复制到本地项目，我也看了一遍源码，源码大致就是给你写了一些上传的代码、和一些读取config.json的配置,

而且源码的上传保存路径是本地临时文件夹，一般保存图片都是放在第三方文件服务器、如果大家去改这个，很不推荐、一些小白可能到这里就卡死在这里了

最后我的要求很简单，就是一个富文本、可以上传图片，大家也不用去引用什么jar包
自己定义两个接口就搞定了：
1.读取config.json配置文件，回显接口（我不建议大家把配置文件弄成java代码，太麻烦）
2.图片读取显示接口（就是上传成功后，前端还需要读取图片显示）
3.下面有代码，好理解

最后说一点比较重要的，前端的富文本请求地址是一个，是根据参数?action来判断功能的,比如/ue?action=uploadimage说明是上传图片，/ue?action=config说明是读取配置信息

二、官网下载ueditor

下载地址：https://ueditor.baidu.com/website/download.html
我下载的是最新版JSP、UTF版本

三、建立SpringBoot项目、引入ueditor

怎么建立就不说了，index.html放在项目resources/templates下，config.json放在resource下,config.json文件什么都不用动，其他的文件全放在resources/static下

四、写跳转到index.html的controller

五、富文本请求controller（重点）

我直接把代码都贴上了

package org.gg.ueditorimage.controller;

import org.apache.commons.io.FileUtils;
import org.gg.ueditorimage.rest.Ret;
import org.springframework.util.Assert;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.net.URL;
import java.util.UUID;

@RestController
@RequestMapping("/ue")
public class UEditorController {

    private static final String CONFIG = "config";
    private static final String UPLOAD_IMAGE = "uploadimage";
    private static final String CONFIG_PATH = "config.json";
    private static final String SAVE_PATH = "G:\\ideaProject\\ueditor-image\\src\\main\\resources\\image\\";

    /**
     * 富文本server地址
     *
     * @param
     * @return
     * @throws
     */
    @RequestMapping
    public String ueditor(@RequestParam("action") String action, MultipartFile upfile) throws IOException {
        // Check action
        Assert.notNull(action, "Request api:[/ue] param:[action] is null");
        // Request action route
        switch (action) {
            case CONFIG:
                return readConfig();
            case UPLOAD_IMAGE:
                // Image save to local
                String suffix = upfile.getOriginalFilename().substring(upfile.getOriginalFilename().lastIndexOf('.'));
                StringBuffer filename = new StringBuffer().append(UUID.randomUUID()).append(suffix);
                FileUtils.copyInputStreamToFile(upfile.getInputStream(), new File(SAVE_PATH + filename.toString()));
                return new Ret(upfile.getOriginalFilename(),
                        String.valueOf(upfile.getSize()),
                        filename.toString(), suffix,
                        filename.insert(0, "/ue/image/").toString()).toJsonString();
            default:
                throw new IllegalStateException("Request api:[/ue] param:[action] mismatching");
        }
    }

    /**
     * 图片读取地址
     *
     * @param
     * @return
     * @throws
     */
    @GetMapping("/image/{name}")
    public void preview(@PathVariable String name, HttpServletResponse response) {
        this.readImage(name, response);
    }

    /**
     * 读取配置信息
     *
     * @return String
     * @throws throws IOException
     */
    private String readConfig() throws IOException {
        StringBuffer sb = new StringBuffer();
        URL resource = UEditorController.class.getClassLoader().getResource(CONFIG_PATH);
        BufferedReader bufferedReader = new BufferedReader(new FileReader(resource.getPath()));
        while (bufferedReader.ready()) {
            sb.append(bufferedReader.readLine());
        }
        // 字符串过滤（过滤注释信息、空格）
        String config = sb.toString().replaceAll("/\\*[\\s\\S]*?\\*/", "").replace(" ", "");
        return config;
    }

    /**
     * 读取图片（读取本地图片）
     *
     * @param name     图片名
     * @param response 响应对象
     */
    private void readImage(String name, HttpServletResponse response) {
        try (ServletOutputStream outputStream = response.getOutputStream();
             InputStream inputStream = new FileInputStream(SAVE_PATH + name)) {
            // Read IO Write outputStream
            byte[] buffer = new byte[4096];
            int count;
            while ((count = inputStream.read(buffer)) > 0) {
                outputStream.write(buffer, 0, count);
            }
            outputStream.flush();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

这里面的代码就好懂了吧，ueditor方法就是一个请求路由、根据action的值做不同功能

Ret.java 图片上传成功后的返回类、前端富文本需要这样的结构，后端这样就弄完了，超级的简单

package org.gg.ueditorimage.rest;

import com.alibaba.fastjson.JSON;

import java.io.Serializable;

/***
 * 图片上传成功响应类
 */
public class Ret {

    private String state;

    private String original;

    private String size;

    private String title;

    private String type;

    private String url;

    public Ret(String original, String size, String title, String type, String url) {
        this.state = "SUCCESS";
        this.original = original;
        this.size = size;
        this.title = title;
        this.type = type;
        this.url = url;
    }

    public String toJsonString() {
        return JSON.toJSONString(this);
    }

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }

    public String getOriginal() {
        return original;
    }

    public void setOriginal(String original) {
        this.original = original;
    }

    public String getSize() {
        return size;
    }

    public void setSize(String size) {
        this.size = size;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }
}

六、前端ueditor.config.js文件配置

前端改一个地方就行了

七、页面效果

看图吧，这个最好了，直接验证我的做法正不正确


看上传地址、响应结果

图片回显

八、前后端分离配置

其实配置很简单、和那个配置一样，但是大家可能因为环境不同会这样配置
前端端口：8080，后端端口8005

这样配置可能觉得没问题，页面访问也能正常拿到数据，但是会报错：


这个错误的具体就不说了，原因是不再同一个域下，后来我用nginx开一个80端口，把两个都用nginx代理在一个域下去访问：

这样就没问题了

从复杂的操作改为简单、易懂、研究不易、给个赞吧！