栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

springboot下ueditor上传功能的实现及遇到的问题

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

springboot下ueditor上传功能的实现及遇到的问题

前言

本文主要写的是:springboot下ueditor上传功能的实现及遇到的一些问题的处理

整体项目结构展示

Springboot整合ueditor及上传功能实现的具体步骤

1、下载ueditor-1.4.3.3

这个在官网下载就行,不过貌似utf-8版本的没有资源了,源码版的下了几次都中断了,最终我是从第三方下的

2、新建一个测试页面

ueditor的根目录下有一个index.html,用它就行,源码如下




  完整demo
  
  
  
  



  UEditor演示
  


  
    
    
    
    
    
    
    
    
    
    
  
  
    
    
    
    
    
    
    
  
  
    
    
  


  
  



3、引入上传所需的jar包


 com.gitee.qdbp.thirdparty
 ueditor
 1.4.3.3


 commons-codec
 commons-codec


 commons-fileupload
 commons-fileupload
 1.3.1


 commons-io
 commons-io
 2.5
 compile


 org.json
 json

4、新建上传文件保存目录文件夹,如下

其中的config.json是从ueditor-1.4.3.3的文件夹里拷过来,因为我发现默认上传文件路径就是config.json所在目录,而且springboot下我试了配置imagePathFormat并没有什么用。

5、新建UeditorController

用于读取ueditor.json配置文件,同时实现上传方法(当然这里我们直接使用了ueditor.jar的上传,因此显得很简单,但如果要我们自己写那就有一堆代码量了)

import com.baidu.ueditor.ActionEnter;
import org.springframework.stereotype.Controller;
import org.springframework.util.ClassUtils;
import org.springframework.web.bind.annotation.RequestMapping;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;
 

@Controller
public class UeditorController {
 
  // /ueditor/jsp/config.json文件所在的父目录,上传文件默认根目录为config.json文件所在目录
  private String configJsonParentPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static/fileupload/ueditor";
 
  
  @RequestMapping("ueditor")
  public void getEditorConfig(HttpServletRequest request, HttpServletResponse response, String action) {
    response.setContentType("application/json");
    try {
      String exec = new ActionEnter(request, configJsonParentPath).exec();
      if(action!=null && (action.equals("listfile") || action.equals("listimage"))) {
 exec = exec.replace(configJsonParentPath.substring(1), "/");
      }
      PrintWriter writer = response.getWriter();
      writer.write(exec);
      writer.flush();
      writer.close();
    } catch (Exception e) {
      e.printStackTrace();
    }
  }
}

注意看注释

6、接着,我们需要将ueditor.config.js中的serverUrl配置为我们在第5步的那个controller,如下

7、最后还要在config.json中配置下我们上传的具体细节,下面以图片上传为例


  "imageActionName": "uploadimage", 
  "imageFieldName": "upfile", 
  "imageMaxSize": 2048000, 
  "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], 
  "imageCompressEnable": true, 
  "imageCompressBorder": 1600, 
  "imageInsertAlign": "none", 
  
  "imageUrlPrefix": "/fileupload/ueditor", 
  
  "imagePathFormat": "/image/{yyyy}{mm}{dd}/{time}{rand:6}", 
  
  
  
  
  
  
  
  
  
  
  
  

这里我们需要关注重点理解的是 imageUrlPrefix 、imagePathFormat

1) 域名 + imageUrlPrefix + imagePathFormat 为当前文件的访问路径;

2)imageUrlPrefix是图片访问路径前缀,例如:http://localhost:8080/fileupload/ueditor,imageUrlPrefix就是其中的“/fileupload/ueditor”;

3)imagePathFormat是以imageUrlPrefix为根路径的文件存放的具体路径,例如:

http://localhost:8080/fileupload/ueditor/image/20190202/121222.jpg,imagePathFormat就是其中的“/image/20190202/121222.jpg”;

4)剩下其他参数就很明显了。

7、可能会遇到的问题

1、明明配置的文件最大为2048000,但是文件只有1M多点后台报错了?

解决:这是因为默认开启了springboot的上传,在application.properties中 spring.servlet.multipart.enabled=false 就可以了,或者也可以跳下它的默认最大值 spring.servlet.multipart.max-file-size=1MB,具体如下图:

2、明明修改了imagePathFormat,单还是保存在了原始的路径下?

解决:直接将config.json文件放到了我想保存文件的位置即可。

3、在线管理图片无法显示?

解决:在我们上面的UeditorController中其实已经解决了,就是当action=listfile或者action=listimage时将new ActionEnter(request, configJsonParentPath).exec()得到的字符串中的configJsonParentPath路径替换为空字符串即可,如下


最后启动服务,打开http://localhost:8080/ueditor/index.html页面测试,效果如下图:

总结

以上所述是小编给大家介绍的springboot下ueditor上传功能的实现及遇到的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/136232.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号