springboot项目整合ueditor 图片上传后端配置 jar包 war包两种配置

àì夳堔傛蜴生んèń 2022-02-25 03:22 485阅读 0赞

为什么要进行后端配置 ：因为ueditor需要获得他的配置信息就是 config.json 里面的内容，比如图片的请求地址、保存路径等等

String rootPath = request.getSession().getServletContext().getRealPath("/");

run as application E:\\git\\wedding\\wedding-app\\wedding-app\\src\\main\\webapp\\

run as server D:\\01develop\\apache-tomcat-8.5.35-windows-x64\\apache-tomcat-8.5.35\\webapps\\wedding-app\\

**流程 ：**

**下载ueditor jsp 版**

**引入依赖**

<dependency>
    	<groupId>com.gitee.qdbp.thirdparty</groupId>
    	<artifactId>ueditor</artifactId>
    	<version>1.4.3.3</version>
    </dependency>
    
    <dependency>
        <groupId>com.alibaba</groupId>
    	<artifactId>fastjson</artifactId>
    	<version>1.2.47</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>

**1 springboot jar包版（run as application）**

1 将ueditor/jsp/config.json 文件 放到src/main/webapp 下面（这里 你的json文件可能会报错 ，是因为里面json有注释 ，json校验的时候会报错 但是不影响运行）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70][]![20190331172435231.png][]

2 将ueditor.config.js文件 中的serverUrl 改为后端请求的地址

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70 1][]

3 后端controller  @requestMapping就是你上面的serverUrl 请求的路径

@RequestMapping("/ueditor")
    	public void ueditor(HttpServletRequest request, HttpServletResponse response) {
    		System.out.println("进来了");
    		try {
    			request.setCharacterEncoding( "utf-8" );
    			response.setHeader("Content-Type" , "text/html");
    	        response.setContentType("application/json");
    	        // 去加载config.json文件
    			String rootPath = request.getSession().getServletContext().getRealPath("/");	
    			PrintWriter out = response.getWriter();
    			String exec = new ActionEnter( request, rootPath ).exec();
    			System.out.println(rootPath+"\n"+exec);
    			out.write( exec );
    			out.flush();
    			out.close();
    		} catch (Exception e) {
    			e.printStackTrace();
    		}	
    		
    	}

这时候 去打开页面 就已经可以上传图片了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70 3][]

上传的地址为  你的项目路径/src/main/webapp/+你的config.json里面设置的路径

以我的为例

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70 4][]

就是 E:\\git\\wedding\\wedding-app\\wedding-app\\src\\main\\webapp\\ueditor\\jsp\\upload\\image\\20190331 文件目录下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70 5][]

你可能 上传完毕后 回显不正常  就像下面这样

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70 6][]

那是因为你的请求路径没配置好 ，去config.json里面配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70 7][]

就显示成功啦

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70 8][]

**2 springboot war包版( run as server)**

**只需要 将**ueditor.config.js** 和 config.json 里面的配置文件修改 请求路径加上项目名称 就可以了 **

**在tomcat 里面运行 webapp里面的文件和WEB-INF同级**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70 9][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190331172412190.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5,size_16,color_FFFFFF,t_70
[20190331172435231.png]: /images/20220225/baeb8b648d6a4278a5e4b40903a30d50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70 1]: /images/20220225/f972261171094da5ac5bc85c465eec0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70 2]: /images/20220225/7e7d8f1debc94af78ab704af6a2d2443.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70 3]: /images/20220225/61eb229ae02a4233bce4496ac50b00f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70 4]: /images/20220225/a331cea0f94d438cb25fd6b566c2185f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70 5]: /images/20220225/680513c0901f47ba8571b9ad78f1933e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70 6]: /images/20220225/2826a723ee3f4dceb991550da8c7f9d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70 7]: /images/20220225/6143a134b67548f6972294536e929548.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70 8]: /images/20220225/86a1630120f54425a74aad7865d7ea5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzM0ODU5_size_16_color_FFFFFF_t_70 9]: /images/20220225/e1d391ee71b14aebb48954020065c732.png