关于百度ueditor编辑器上传图片的问题

sunonzj

发布于 2022-06-21 14:38:51

7320

发布于 2022-06-21 14:38:51

文章被收录于专栏：zjblogzjblog

因为博客发布文章需要个富文本编辑器，所见即所得，排版什么的还是很重要的。百了很多最后还是决定用ueditor 虽然已经被百度放弃了（不再更新）但是功能齐全插件多还是很好用的第一次使用也是照着别人的教程写的下载最新的ueditor-jsp版（根据自己的需求下载）http://ueditor.baidu.com/website/download.html 然后把下载好的内容放到web项目的webapp下，然后导包，我是直接把jar复制到web-inf的lib下然后build path，虽然这样会感觉好像太原始了。。，直接用maven导入会有问题，好像是因为ueditor不存在远程和本地仓库，不过可以在pom.xml中导入然后再把jar包复制到本地仓库，或者自己创建个私服然后把jar包放进去。。修改config.json，

"imageUrlPrefix": "http://www.zjhuiwan.cn/****", /* 图片访问路径前缀项目根路径
                                              -这里写的是Tomcat配置的虚拟目录*/ 
"physicsPath":"/**/***/***", /*F:/zjblogImg/upload上传到本地必填，
                           非本地为空即可*/
"imagePathFormat": "/ueditorImage/{yyyy}{mm}{dd}/{time}{ss}{rand:6}",
        /* 上传保存路径,可以自定义保存路径和文件名格式 */

最后页面引入这几个js

<script type="text/javascript" charset="utf-8"
    src="ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8"
    src="ueditor/lang/zh-cn/zh-cn.js"></script>

[然后这样引入ueditor

<textarea name="articleDetail" id="articleDetail" style="width: 800px; 
height: 550px;overflow: auto; margin: 0 auto;"></textarea>

<script type="text/javascript">
        var ue = UE.getEditor("articleDetail");
    </script>

后台直接根据form中的name接收即可，保存的是HTML代码。这样就可以排版了。

运行发现出来了

注意springmvc要配置放行

 <!-- 3.配置jsp 显示ViewResolver -->
     <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view
        .JstlView" />
        <property name="prefix" value="/WEB-INF/jsp/" />
        <property name="suffix" value=".jsp" />
     </bean>

但是使用的时候还是发现问题，上传成功后，重启Tomcat会删掉图片，因为我们是上传到了Tomcat下的webapp目录下的项目中，而我们MyEclipse中的项目和Tomcat下的项目实际是两个，重启Tomcat时会重新部署项目，也就是把原来的xm覆盖掉了，图片也就被删了。为了解决这个问题我们应该把上传的图片放到专门的位置，一般项目静态资源回放独立的服务器，这里我就直接是放跟项目同级的Tomcat根目录下。当然也可以放硬盘其他地方，比如D:/img/upload

图片上传代码：

/**
     * @Description:文件上传
     * @param file
     * @return
     */
    public static String saveFile(MultipartFile file, HttpServletRequest request) {
        // 判断文件是否为空
        if (!file.isEmpty()) {
            try {
                // 获取3位的随机数
                int num = (int)(100 + Math.random() * (999 - 1 + 1));
                // 设置日期格式
                SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmsss");
                
                String dateTime = df.format(new Date());
                // 取文件格式后缀名
                String type = file.getOriginalFilename().substring(file.
                getOriginalFilename().indexOf("."));
                // 上传文件名
                String fileName = dateTime + num + type;// 取当前时间戳作为文件名
                // 上传文件路径(保存项目根路径)
                // String path = request.getSession().getServletContext().
                getRealPath("/upload/otherImg");
                // 保存本地
                String path = "/usr/zjblogImg/upload/otherImg";
                // String path = "F:/zjblogImg/upload/otherImg";
                // 判断路径是否存在，如果不存在就创建一个
                File filePath = new File(path, fileName);
                if (!filePath.getParentFile().exists()) {
                    filePath.getParentFile().mkdirs();
                }
                // 转存文件
                file.transferTo(new File(path + File.separator + fileName));
                return fileName;
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        return " ";
    }

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018-09-25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

tomcat