关于springboot+vue集成ueditor编辑器

利用springboot做后端接口，VUE做前端，现在有用到ueditor编辑器，目前出现很多问题，现在独自记录下来，以便后期记录。

首先，ueditor采用的是vue-ueditor-wrap！作者替我们修正了很多ueditor的BUG。

前端部署，我们就按照vue-ueditor-wrap说明的部署，这里主要讲述用springboot怎么搭建后端。

目前实现的只有上穿图片和涂鸦的功能。重点就是将图片获取到后，进行自定义处理，主要采用MultipartFile的方式进行存储，这个百度一下，一大堆，这里主要体现的是接收ueditor编辑器传递过来的操作。

直接上代码：

package com.syiti.hts.oss.controller;

import com.syiti.hts.oss.dto.UeditorDto;
import com.syiti.hts.oss.dto.UploadFileDto;
import com.syiti.hts.oss.service.IUploadFileService;
import com.syiti.hts.oss.service.IUploadImagesService;
import com.syiti.hts.oss.util.FileUploadUtil;
import com.syiti.hts.oss.util.StringUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import javax.servlet.http.HttpServletRequest;
import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.util.Enumeration;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;

/**
 * @Author: chenrd
 * @Date: 2019/8/22 10:00
 */
@RestController
@RequestMapping("ueditor")
public class UeditorController {

    @Autowired
    private IUploadFileService iuploadFileService;


    @Autowired
    private IUploadImagesService iUploadImagesService;

    @RequestMapping("index")
    @ResponseBody
    public Object ueditor(HttpServletRequest request, String callback, String action) {
        UeditorDto ueditorDto = new UeditorDto();
        switch (action) {
            case "config": // 此处即为获取配置文件的case
                String config = getUeditorConfig();
                return (callback + "(" + config + ");");
            case "uploadimage":
                MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
                Iterator it = multipartRequest.getFileNames();
                while(it.hasNext()) {
                    MultipartFile file = multipartRequest.getFile(it.next().toString());
                    if(file != null) {
                        Map<Integer, String> map = iUploadImagesService.uploadImage(file);
                        if(map.get(1) != null){  //上传成功
                            ueditorDto.setState("SUCCESS");
                            ueditorDto.setTitle(file.getOriginalFilename());
                            ueditorDto.setUrl(map.get(1));
                            ueditorDto.setOriginal(file.getOriginalFilename());
                        }else{
                            ueditorDto.setState("ERROR");
                        }
                    }
                }
                return ueditorDto;
            case "uploadscrawl":
                try {
                    String upfile = request.getParameter("upfile");
                    if(upfile != null) {
                        //注意！ueditor上传过来的base64并无前面的“data:image/jpeg;base64,”，所有我们需要自行补充。
                        MultipartFile file = FileUploadUtil.base64ToMultipart("data:image/jpeg;base64,"+upfile);
                        Map<Integer, String> map = iUploadImagesService.uploadImage(file);
                        if (map.get(1) != null) {  //上传成功
                            ueditorDto.setState("SUCCESS");
                            ueditorDto.setTitle("scrawl.jpg");
                            ueditorDto.setUrl(map.get(1));
                            ueditorDto.setOriginal(map.get(1));
                        } else {
                            ueditorDto.setState("ERROR");
                        }
                    }
                }catch (Exception e){
                    e.printStackTrace();
                    ueditorDto.setState("ERROR");
                }
                return ueditorDto;
        }

        return null;
    }

    /**
     * 返回ueditor的配置文件
     * @return
     */
    private String getUeditorConfig() {
        StringBuilder config = new StringBuilder();
        try {
            //此处即为获取配置文件，因为springboot的原因，目前我只能用流来获取文件内容
            InputStream stream = getClass().getClassLoader().getResourceAsStream("ueditor-config.json");
            BufferedReader buff = new BufferedReader(new InputStreamReader(stream));
            String temp = null;
            while ((temp = buff.readLine()) != null) {
                config.append(temp);
            }
            //把配置文件中的注释去掉
            String configStr = config.toString().replaceAll("/\\*[\\s\\S]*?\\*/", "");
            return configStr;
        } catch (Exception e) {
            return null;
        }
    }
}

end!