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

蔚落 2023-06-23 10:56 33阅读 0赞

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

##### 1、下载UEditor([点击下载][Link 1]) #####

![下载][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw_size_16_color_FFFFFF_t_70]

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

![在这里插入图片描述][20191218170141643.png]  
把ueditor->js下的config.json放到resources目录下  
![在这里插入图片描述][20191218170303525.png]

##### 3、加入maven依赖 #####

<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>
     
    <dependency>
         <groupId>com.alibaba</groupId>
         <artifactId>fastjson</artifactId>
    </dependency>

##### 4、引用并使用ueditor #####

//实例化编辑器
    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错误，上传功能将不能正常使用！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw_size_16_color_FFFFFF_t_70 1]

##### 6、解决图片上传问题 #####

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

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

默认路径：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw_size_16_color_FFFFFF_t_70 2]  
更改后的路径：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw_size_16_color_FFFFFF_t_70 3]  
配置我们自己的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：  
![在这里插入图片描述][20191219093851971.png]

@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、至此，上传图片问题解决 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw_size_16_color_FFFFFF_t_70 5]

[Link 1]: http://ueditor.baidu.com/website/download.html#ueditor
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191218165601290.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw,size_16,color_FFFFFF,t_70
[20191218170141643.png]: https://img-blog.csdnimg.cn/20191218170141643.png
[20191218170303525.png]: https://img-blog.csdnimg.cn/20191218170303525.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191218172012769.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2019121817514894.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191218175241487.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw,size_16,color_FFFFFF,t_70
[20191219093851971.png]: https://img-blog.csdnimg.cn/20191219093851971.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191219095220160.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191219095249849.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw,size_16,color_FFFFFF,t_70