springboot整合ueditor+图片上传

项目地址

https://ueditor.baidu.com/website/

下载步骤

springboot整合ueditor+图片上传_第1张图片

开始整合

因为项目使用的springboot框架,而UEditor对于java后端的支持仅仅是给了一个jsp文件,因此,需要对该文件进行一下处理,修改为面向springboot的统一controller。

1、放到项目中

springboot整合ueditor+图片上传_第2张图片

2、引入ueditor需要的jar包

springboot整合ueditor+图片上传_第3张图片

3、创建test.html,结构如下

springboot整合ueditor+图片上传_第4张图片

4、模板建好了,我们来写控制器,结构及代码如下

springboot整合ueditor+图片上传_第5张图片

5、访问:http://localhost:8080/admin/test ,出现如下界面,说明ueditor引入成功。

springboot整合ueditor+图片上传_第6张图片

图片上传

1、点击上传按钮却没有任何反应,在浏览器中按F12打开开发者工具发现如下提示:

2、spring boot中不能直接将请求发送到这个controller.jsp,请求会变成下载地址,所以需要新建一个一个控制器加载配置文件,

需要把配置文件中此处修改掉,修改成新建控制器的路径。

springboot整合ueditor+图片上传_第7张图片

以下是控制器全部代码:

@Controller
public class UploadController {
    @Value("${root.path}")
    private String rootPath;

    @ResponseBody
    @RequestMapping("/config")
    public Object demo(HttpServletRequest request, HttpServletResponse response){
        SimpleDateFormat formater = new SimpleDateFormat("yyyyMMdd");
        String path = "//" + formater.format(new Date());
        String action = request.getParameter("action");
        String rPath = ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static/admin/ueditor/jsp";
        String sPath =  rootPath + CommonConstnts.IMAGES_PATH;
        if(action.equals("uploadimage")){
            MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest)request;
            MultipartFile multipartFile = multipartHttpServletRequest.getFile("upfile");
            String filePath = sPath+path;
            File file = new File(filePath);
            if(!file.exists()){
                file.mkdirs();
            }
            String imgName = multipartFile.getOriginalFilename();
            String hz = imgName.substring(imgName.indexOf("."));
            String uuid = UUID.randomUUID().toString();
            String uuid1 = UUID.randomUUID().toString();
            uuid = uuid.replace("-","");
            uuid1 = uuid1.replace("-","");
            String name = filePath+"//"+uuid+hz;
            String fileName = filePath+"//"+uuid1+hz;
            File f = new File(name);
            File f1 = new File(fileName);
            try {
                multipartFile.transferTo(f);
                InputStream inputStream = new FileInputStream(f);
                OutputStream os = new FileOutputStream(f1);
                ImageUtil.resizeImage(inputStream,os,500,750,hz.replace(".",""));
                f.delete();
            }catch (Exception e){
                e.printStackTrace();
            }

            Map map = new HashMap();
            map.put("original",multipartFile.getOriginalFilename());
            map.put("name",multipartFile.getOriginalFilename());
            map.put("url",CommonConstnts.IMAGES_PATH+path+"//"+uuid1+hz);
            map.put("size",multipartFile.getSize());
            map.put("type","."+hz);
            map.put("state","SUCCESS");
            return map;
        }else{
            response.setContentType("application/json");
            try {
                response.setCharacterEncoding("utf-8");
                request.setCharacterEncoding( "utf-8" );
                PrintWriter writer = response.getWriter();
                writer.write(new ActionEnter(request,rPath).exec());
                writer.flush();
                writer.close();
            }catch (Exception r){
                r.printStackTrace();
            }
        }
        return null;
    }

}

 其中ImageUtil.resizeImage(inputStream,os,500,750,hz.replace(".",""));是一个公用方法,用来压缩图片文件大小和尺寸,可以参考另一篇博客。

springboot整合ueditor+图片上传_第8张图片

rPath为config.json所有在配置文件路径。当初始化的时候一定要调 config.json返回给编辑器,这样就可以在 config.json文件中修改上传的各种配置。

代码中的rootPath需要在配置文件进行配置(注解引入即可使用),需要把上传图片保存在本机上并返回物理路径。

springboot整合ueditor+图片上传_第9张图片

 3、以下是config.json中的配置

springboot整合ueditor+图片上传_第10张图片

4、最后成功的截图

springboot整合ueditor+图片上传_第11张图片

你可能感兴趣的:(java)