ssh 使用 wangeditor3 富文本编辑器上传图片方法

这段时间在搞一个小网站的项目,其中有个功能是可以网页上编辑文字和图片,能一起上传到数据库然后在页面上展现,当然还可以上传附件,不过我现在还没弄好,先把上传图片的功能记录一下。
说到这个wangeditor3富文本编辑器,只能说自己才疏学浅被搞得头晕,花了将近三四天才弄好这个简单的上传图片功能= = 主要原因在于还不清楚普通上传图片的具体步骤,直接着手使用富文本编辑器来实现功能,而且这个wangeditor还以轻量级为特点,其文档就没有那么仔细,出现问题的时候我看网上也没有太多的方法可寻,所以在此写下这篇短叙以供自己和网友参考及回忆。话不多说,上代码。

jsp页面:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>

    <form id="newspost" method="post" action="newspost" namespace="/" enctype="multipart/form-data">

    <input type="hidden" id="content" name="content"/>
    <div style="padding: 5px 0; color: #ccc"></div>
    <div id="editor"></div>
    <br>
    <input type="button" value="保存" onclick="subm()"></input>

    </form>

    <!-- 注意, 只需要引用 JS,无需引用任何 CSS !!!-->
    <script type="text/javascript" src="${pageContext.request.contextPath }/wangEditor.min.js"></script>

    <script type="text/javascript">
        function subm(){

            var title = document.getElementById('title').value;
            document.getElementById('content').value=editor.txt.html();
            document.getElementById('newspost').submit(); 
           }
    </script>
    <script type="text/javascript">
         var E = window.wangEditor
         var editor = new E('#editor')
         editor.customConfig.showLinkImg = false  // 隐藏“网络图片”tab  
         editor.customConfig.uploadFileName = 'yourFileName'      //给上传的本地图片文件命名的统一名称  
         editor.customConfig.uploadImgServer = '/News/picload.action'//官方文档上写的是服务器地址,也就是上传图片的方法名

         editor.customConfig.debug = true
         editor.create() 


    </script>


</body>
</html>

上传图片方法:(参考的方法是wangeditor2文档里的一种)

public void picload() throws Exception{

        HttpServletRequest request = ServletActionContext.getRequest();
        HttpServletResponse response = ServletActionContext.getResponse();

        //创建上传图片存放的文件夹
        String path = request.getServletContext().getRealPath("/image");
        File file = new File(path);
        if (!file.exists())
            file.mkdirs();
        String fileName = "";// 文件名称

        /**上传文件处理内容**/
        DiskFileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload sfu = new ServletFileUpload(factory);
        sfu.setHeaderEncoding("UTF-8"); // 处理中文问题
        sfu.setSizeMax(1024 * 1024); // 限制文件大小
        try {
            List<FileItem> fileItems = sfu.parseRequest(request); // 解码请求
            System.out.println(fileItems);
            for (FileItem fi : fileItems) {
                fileName = UUID.randomUUID()+fi.getName().substring(fi.getName().lastIndexOf("."),fi.getName().length());
                fi.write(new File(path, fileName));
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

        //获取图片url地址
        System.out.println("fileName:"+fileName);
        String imgUrl = "http://localhost:8080/News/image/" + fileName;
        System.out.println("imgUrl:"+imgUrl);       

        //这里的data数据形式必须如此,返回的url地址才能匹配上wangeditor3的源程序要求
        String data = "{errno: 0,data: ['" + imgUrl + "']}";
        response.setContentType("text/text;charset=utf-8");
        PrintWriter out = response.getWriter();        
        //这里需要用JSONObject转一下String类型的数据,才能保证传回去的数据是json格式的
        JSONObject jsonObject = JSONObject.fromObject(data);       
        out.print(jsonObject.toString());  //返回url地址
        out.flush();
        out.close();

        }

上面的java代码中有个注意的点,就是解码请求List<FileItem> fileItems = sfu.parseRequest(request); 意思是解析表单中的每一个表单项,封装成FileItem对象,以List方式返回。刚开始不知道这里有问题,所以更加头大,多处错误导致本就混乱的我濒临崩溃。debug后发现这个 fileItem 的值为空,于是上网搜索解决方法,有说是表单没配这个属性 enctype=”multipart/form-data” ,但不存在,我一开始用的就是这个。
然后有博客有写到博客地址
这里springMVC 都为我们封装好成自己的文件对象了,转换的过程就在我们所配置的CommonsMultipartResolver这个转换器里面下面再来看看它的源码
这里写图片描述
他的转换器里面就是调用common-fileupload的方式解析,然后再使用parseFileItems()方法封装成自己的文件对象 .

List<FileItem> fileItems = ((ServletFileUpload) fileUpload).parseRequest(request);  

大家应该发现了上面的这句代码,已经使用过fileUpload解析过request了,你在Controller里面接收到的request都已经是解析过的,你再次使用upload进行解析获取到的肯定是空,这个就是问题的所在(大家可以在servlet里面实验,看看第二次解析后能不能获取到数据,当然是不能的)。
struts2把原始的原来S2为简化上传功能,把所有的enctype=”multipart/form-data”表单做了wrapper最后把HttpServletResquest封装成 org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper
最后解决方案:
重写parse方法,这样就可以自己设置什么操作被struts2过滤处理,什么不被过滤处理。

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.dispatcher.multipart.JakartaMultiPartRequest;

public class MyMultiPartRequest extends JakartaMultiPartRequest{  

    @Override  
    public void parse(HttpServletRequest request, String arg1) throws IOException {  
         String url = request.getRequestURI().toString();//取得请求的URL  
         if(url.indexOf("picload.action")>0){//调用的是uploadWebApp.action方法  
             //不需要struts2的处理  
         }else{  
             //需要struts2的处理,调用回父类的方法  
             super.parse(request, arg1);  
         }  
    }  

}  

关于最后的json数据转换,还有一点需要提,就是他需要加几个jar包,
组装和解析JSONObject的Json字符串,共需要下面六个包:
1、json-lib
2、commons-beanutils
3、commons-collections
4、commons-lang
5、commons-logging
6、ezmorph
其中commons-lang.jar包需要使用旧一点的版本,2.3,2.4,2.5好像都可以,只要其中有NestableRuntimeException.class就行,不然这个JSONObject jsonObject = JSONObject.fromObject(data); 会不报错也不执行、、(有毒)
这里写图片描述
以下版本是我所使用的,可从网上找资源下载。
commons-lang-2.3.jar
commons-io-2.2.jar
commons-collections-3.2.1.jar
commons-fileupload-1.3.1.jar
commons-logging-1.2.jar
ezmorph-1.0.6.jar

哦还有一点,这个编辑器的123版本给用户使用的变量大部分都不相同,各位网友记得仔细仔细再仔细、、、、、

大概就是这样了,可能还有些问题,各位道友请多指教。
上传附件功能等我弄出来之后再更、

好了,时隔…多日- -,终于搞出来,简单的上传下载附件功能也弄了好久,事情较多,然后没有然后,都是借口哈哈哈哈哈

  • 3
    点赞
  • 2
    收藏
  • 打赏
    打赏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:精致技术 设计师:CSDN官方博客 返回首页
评论 8

打赏作者

Cool__Xu

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值