UEditor文件上传

  先贴出官网文档地址:http://fex.baidu.com/ueditor/

  前端部分  

  1、下载源码:https://github.com/fex-team/ueditor#ueditor,我使用的是ueditor-dev-1.4.3

  2、解压后用VSCode打开,目录如下:

     

  3、修改ueditor.config.js

   

   说明:我用的VSCode的插件Live Server运行的前端项目,为防止跨域问题,要设置一下代理

    

   4、在_examples目录下新建文件mytest.html

复制代码
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title></title>
    <script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="editor_api.js"></script>
</head>
<body>
<script type="text/plain" id="editor" style="margin-bottom:100px;"></script>
<script type="text/javascript">
    UE.getEditor('editor', {
        theme:"default", //皮肤
        lang:'zh-cn' //语言
    });
</script>
</body>
</html>
复制代码

  后端部分

  1、引入依赖

 <dependency>
     <groupId>com.gitee.qdbp.thirdparty</groupId>
     <artifactId>ueditor</artifactId>
     <version>1.4.3.3</version>
 </dependency>

  2、修改config.json文件

"imageUrlPrefix": "http://localhost:8888", /* 图片访问路径前缀 */
"imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

  说明:文件的保存路径是:项目根目录+imagePathFormat,返回的地址是:imageUrlPrefix + imagePathFormat

  3、java代码示例

复制代码
@RestController
public class FileController {

    @RequestMapping("/file/upload")
    public void get(HttpServletRequest request, HttpServletResponse response){
        try {
            String rootPath = "xxxx";
            String configPath = "/src/main/resources/static/ueditor";
            String exec = new ActionEnter(request, rootPath, configPath ).exec();
            PrintWriter write = response.getWriter();
            write.write(exec);
            write.flush();
            write.close();
        }catch (Exception e){
            e.printStackTrace();
        }
    }
}
复制代码

  说明:rootPath是项目名称,configPath是config.json的同级目录

    (其实/ueditor可以随意写,不存在的路径也行,比如/src/main/resources/static/aaaaa,但必须与config.json同级)如下:

  

  4、映射路径可直接访问

复制代码
@SpringBootConfiguration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry
                .addResourceHandler("/upload/image/**")
                .addResourceLocations("file:D:/workset/javaset/project/official/BLOG/xxxx/upload/image/");
    }
}
复制代码

  说明:方法的含义是如果路径匹配到/upload/image/开头的路径,则将映射地址替换为D:/workset/javaset/project/official/BLOG/xxxx/upload/image/

  比如:http://localhost:8888/upload/image/20220316/1647438546721003297.png 实际访问的是 D:/workset/javaset/project/official/BLOG/xxxx/upload/image//20220316/1647438546721003297.png

  演示

  运行http://127.0.0.1:8888/ueditor/_examples/mytest.html

  

  

 备注:上面的相关配置是针对前后端分离项目的,如果不采用前后端分离,只需把整个ueditor的内容copy到java工程中,同时修改ueditor.config.js文件

  

   看来与config.json同一级的目录应该是整个ueditor,只不过在前后端分离中用不着罢了

  将项目打包成jar文件,上传功能不好用?

       上面的例子在idea中或打成war包时可以运行,但是打成jar包还是无法运行,这是因为在jar包中读取配置文件config.json失败,需要修改源码。

  为了省事我直接把config.json拿到jar外面了,配置文件路径:D:\ueditor\config.json。同时做如下修改:

  修改config.json文件:

  "imageUrlPrefix": "http://localhost:8888", /* 图片访问路径前缀 */
  "imagePathFormat": "D:/ueditor/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

  修改FileController:

复制代码
@RestController
public class FileController {

    @RequestMapping("/file/upload")
    public void get(HttpServletRequest request, HttpServletResponse response){
        try {
            String rootPath = "";
            String configPath = "D:/ueditor/upload";//与config.json同路径
            String exec = new ActionEnter(request, rootPath, configPath ).exec();
            exec = exec.replaceAll("D:","");
            PrintWriter write = response.getWriter();
            write.write(exec);
            write.flush();
            write.close();
        }catch (Exception e){
            e.printStackTrace();
        }
    }
}
复制代码

  修改映射路径:

复制代码
@SpringBootConfiguration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry
                .addResourceHandler("/ueditor/upload/image/**")
                .addResourceLocations("file:D:/ueditor/upload/image/");
    }
}
复制代码

  这样将项目打成jar文件运行,上传功能就没有问题了。

 

posted @   雷雨客  阅读(2231)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
历史上的今天:
2019-03-16 实现MySQL(5.7版本)主从复制
2019-03-16 VMware安装Centos7过程记载
点击右上角即可分享
微信分享提示