JFinal官方demo整合UEditor详细步骤-番外:图片上传功能

按照上一篇的步骤集成了UEditor后,UEditor可以进行正常编辑,但是你可能会发现进入编辑状态后,单图上传按钮是灰色的无法点击,多图上传按钮点击后显示“后台配置项未正确加载…”。对于此,还需要进行后台配置,本文为添加上传图片功能的说明。

注:在尝试添加图片上传功能的时候我发现JFinal所使用的jetty缺失对jsp的支持,通过单独下载jar包的方式也未能解决。最后使用了JFinal的官方maven demo,通过引入依赖的方式得以解决。所以本文是基于JFinal的maven demo进行操作的。由于maven的便利性,建议大家都使用JFinal的maven版demo。

一、创建一个Controller用于后台处理

src/main/java目录下建立package,并且创建UeditorController.java,如图:

 

UeditorController.java中新建upload方法,用于处理上传任务

public class UeditorController extends Controller {
  public void upload() {
    
    if ("config".equals(getPara("action"))) {
      System.err.println("render: config.json");
      render("/ueditor/jsp/config.json");
      return;
    }
    String path = getSession().getServletContext().getRealPath("/ueditor/jsp/upload/image/");//设置图片保存路径

    UploadFile file = getFile("upfile", "picture"); // 获取文件
    String fileName = file.getFileName();
    
    File pathf = new File(path);
    if (!pathf.exists()) {
      pathf.mkdirs();
    }

    String type = file.getFileName().substring(file.getFileName().lastIndexOf(".")); // 获取文件的后缀
    fileName = System.currentTimeMillis() + type; // 对文件重命名取得的文件名+后缀
    String dest = path + "/" + fileName;
    file.getFile().renameTo(new File(dest));

    String realPic = "/ueditor/jsp/upload/image/" + fileName;
    
    //此处添加修改了一些返回信息,官方文档里没有说明返回信息,只有按照官方demo的返回信息来
    
    setAttr("name", fileName);
    setAttr("original", fileName);
    setAttr("size", file.getFile().length());
    setAttr("type", type);
    setAttr("state", "SUCCESS");
    setAttr("url", realPic);
    setAttr("message", "文件上传成功!");
    renderJson();

  }
}

 

二、修改UEditor配置文件

找到ueditor根目录下的ueditor.config.js文件,将其中的

, serverUrl: URL + "jsp/controller.jsp"

注释掉,添加

, serverUrl: "/ueditor/upload"

 

如下图:

三、添加前台路由

DemoConfig.javaconfigRoute(Routes me)方法中添加一条路由

me.add("/ueditor", UeditorController.class);

 

如下:

四、验证

确保所有编辑过的工程文件均已保存且JFinal已全部加载成功。进入到文章编辑页面,此时可以看到“单图上传”按钮已经可以点击,并且“多图上传”按钮点下后的弹窗也无报错信息。

 

点击上图所示的“单图上传”按钮,选择任一图片进行上传。注意,你可能发现上传后界面是这样的:

 

而实际上,选择上传的图片是这样的:

 

可以看到在我们选择了上传图片后,图片未能全部展现出来。这个问题是UEditor编辑器的一个Bug,建议先点击上传,然后再回来查看修改,此时显示就正确了。如下图:

Share

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.