Spring Boot整合UEditor解决单图多图图片上传问题

   由于在解决Spring Boot使用UEdior富文本编辑器的图片上传问题时花了不少时间，故记录一下解决方案，希望能够帮助到大家。

1、下载UEditor(点击下载)

2、把utf8-jsp重命名为ueditor放到项目中

   把ueditor->js下的config.json放到resources目录下

3、加入maven依赖

<!--ueditor依赖-->
<dependency>
     <groupId>commons-codec</groupId>
     <artifactId>commons-codec</artifactId>
     <version>1.11</version>
 </dependency>
 <dependency>
     <groupId>commons-fileupload</groupId>
     <artifactId>commons-fileupload</artifactId>
     <version>1.3.3</version>
 </dependency>
 <dependency>
     <groupId>commons-io</groupId>
     <artifactId>commons-io</artifactId>
     <version>2.4</version>
 </dependency>
 <dependency>
     <groupId>org.json</groupId>
     <artifactId>json</artifactId>
     <version>20170516</version>
 </dependency>
 <!--MyConfigManager中用到了fastjson-->
<dependency>
     <groupId>com.alibaba</groupId>
     <artifactId>fastjson</artifactId>
</dependency>

4、引用并使用ueditor

<script th:src="@{/ueditor/ueditor.config.js}"></script>
<script th:src="@{/ueditor/ueditor.all.js}"></script>
<script th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>

<div class="form-group">
    <div class="col-sm-12">
     <input name="goodsImageTextDetail" th:field="*{goodsImageTextDetail}" class="form-control" type="hidden">
     <script id="goodsImageTextDetailUe" type="text/plain" name="goodsImageTextDetailUe"
              style="height: 300px;" required></script>
    </div>
</div>

//实例化编辑器
var ue = UE.getEditor('goodsImageTextDetailUe', {});
ue.ready(function () {
    //将数据库内的值回显到编辑框，此例可用在修改页，添加页可去除此部分
   ue.setContent($("#goodsImageTextDetail").val());
});
//提交富文本编辑器中的内容
function submitHandler() {
   if ($.validate.form()) {
       ue.ready(function () {
           //获取图文详情html内容
           var html = ue.getContent();
           $("#goodsImageTextDetail").val(html);
       });
       $.operate.save(prefix + "/edit", $('#form-descriptions-edit').serialize());
   }
 }

   至此，ueditor可以使用，但是图片上传功能还不能使用，页面js报错：
ueditor.all.js:8111 请求后台配置项http错误，上传功能将不能正常使用！

6、解决图片上传问题

   ueditor初始化后，会先找到ueditor目录下的ueditor.config.js，通过ueditor.config.js下的服务器统一请求接口路径serverUrl读取config.json，然后加载config.json中的内容后，图片的icon才能正常显示。

6.1、更改ueditor.config.js中的默认服务器统一请求接口路径serverUrl,加载config.json文件

默认路径：

更改后的路径：

   配置我们自己的controller:

var server_URL = window.location.protocol+"//"+window.location.hostname+":"+window.location.port
serverUrl: server_URL + "/config"

@Controller
public class UEditorController {
  @RequestMapping(value = "/config")
  public void config(HttpServletRequest request, HttpServletResponse response) {
    try {
        PrintWriter out = response.getWriter();
        request.setCharacterEncoding("utf-8");
        response.setHeader("Content-Type", "text/html");
        String action = request.getParameter("action");
        String result = "";
        if (action.equals("config")) {
            MyConfigManager configManager = MyConfigManager.getInstance();
            result = configManager.getAllConfig().toString();
        }
        out.write(result);
    } catch (IOException e) {
        e.printStackTrace();
    }
  }
}

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.UnsupportedEncodingException;
import com.alibaba.fastjson.JSONObject;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.Resource;
/**
 * 配置管理器
 */
public final class MyConfigManager {
  private JSONObject jsonConfig = null;
  private static MyConfigManager manager;
  private MyConfigManager() throws IOException {
	this.initEnv();
  }
  public static MyConfigManager getInstance() {
	if (manager != null) {
	 //ueditor每次实例化都会获取配置文件，单列模式，防止一直new对象
	 return manager;
	}
	try {
		manager = new MyConfigManager();
		return manager;
	} catch (Exception var4) {
		return null;
	}
}
public boolean valid() {
	return this.jsonConfig != null;
}
public JSONObject getAllConfig() {
  if (this.jsonConfig != null)
	 return this.jsonConfig;
  else {
	JSONObject state=new JSONObject();
	//将“配置文件初始化失败”转成unicode编码返回
	state.put("state","\\u914d\\u7f6e\\u6587\\u4ef6\\u521d\\u59cb\\u5316\\u5931\\u8d25");
		return state;
	}
}
private void initEnv() throws IOException {
	String configContent = this.readFile();
	try {
		JSONObject e = JSONObject.parseObject(configContent);
		this.jsonConfig = e;
	} catch (Exception var4) {
		this.jsonConfig = null;
	}
}
private String readFile() throws IOException {
	StringBuilder builder = new StringBuilder();
	//logger.info("开始读取文件：");
	Resource resource = new ClassPathResource("config.json");
	try {
		InputStreamReader reader = new InputStreamReader(resource.getInputStream(), "UTF-8");
		BufferedReader bfReader = new BufferedReader(reader);
		String tmpContent = null;

		while ((tmpContent = bfReader.readLine()) != null) {
			builder.append(tmpContent);
		}
		//logger.info("文件读取完成：");
		bfReader.close();
	} catch (UnsupportedEncodingException var6) {
		//logger.info("文件读取出错：");

	}
	return this.filter(builder.toString());
}
 private String filter(String input) {
	return input.replaceAll("/\\*[\\s\\S]*?\\*/", "");
 }
}

6.2、编写服务端图片上传方法

   js指定图片上传方法：

UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl=function(action){
  if (action == 'uploadimage'||action == 'uploadfile'){
       return '/ueditor/uploadimg';    /* 这里填上你自己的上传图片的url */
   }else{
       return this._bkGetActionUrl.call(this, action);
   }
};

   上传图片后的返回实体：

public class UeditorResponse {
    //图片上传成功后返回获取图片的路径，
    //可以是一个二进制流的接口，也可以是图片地址得接口，总之这个路径必须是写在
    //img标签内能够显示的
    private String url;
    //上传状态信息，如果为"SUCCESS"(必须是大写)，则表示上传成功，不为SUCCESS时
    //页面提示信息就是state得值
    private String state;
    private String type;
    private String original;

    public String getUrl() {
        return url;
    }

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

    public String getState() {
        return state;
    }

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

    public String getType() {
        return type;
    }

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

    public String getOriginal() {
        return original;
    }

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

   图片上传controller：

@RestController
@RequestMapping("/ueditor")
public class UploadController {
@Value(value = "${inmoods.ueditorImgUrl}")
  private String ueditorImgUrl;
  @RequestMapping("/uploadimg")
  public Object upload(@RequestParam(value = "upfile") MultipartFile files, HttpServletRequest req) {
      String rootPath = req.getServletContext().getRealPath("/");
      System.out.println(rootPath);
      UeditorResponse ur = new UeditorResponse();
      ur.setType(files.getOriginalFilename());
      ur.setOriginal(files.getOriginalFilename());
      try {
          // 上传并返回新文件名称,我这里调的是若依的上传方法，
          //可自行编写上传方法
          String fileName = FileUploadUtils.upload(ueditorImgUrl, files);
          ur.setUrl(fileName);
          ur.setState("SUCCESS");
      } catch (IOException e) {
          e.printStackTrace();
          ur.setState("图片上传失败");
          return ur;
      }
      return ur;
  }
 }

7、至此，上传图片问题解决