`

Struts2自定义过滤器 + 百度富文本控件UEditor + Smb上传图片到独立服务器

阅读更多

[转载]UEditor就不多说了,它是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码。

UEditor 源码自带一个图片上传的jsp代码,详见ueditor根目录下的“server/upload/jsp/imageUp.jsp”文件。但是如果项目中使用了Apache Struts2框架,由于该框架默认使用Apache的Commons FileUpload组件和内建的FileUploadInterceptor拦截器实现文件上传,将request中的文件域封装到action中的一个File类型的属性中,并删除request中的原有文件域,因此直接用imageUp.jsp上传文件会失败。

解决方法有很多,例如可以自己写一个action来处理文件上传(注意action中文件域的属性名是picdata);或者自定义一个拦截器栈,去掉默认的FileUpload拦截器;或者配置struts不对jsp文件进行过滤等方法。笔者认为对项目影响最少、最简单的方法是自定义一个过滤器,单独指定不对imageUp.jsp进行过滤;代码示例如下:

01 package com.taiji.yagl.security; 
02    
03 import javax.servlet.FilterChain; 
04 import javax.servlet.ServletRequest; 
05 import javax.servlet.ServletResponse; 
06 import javax.servlet.http.HttpServletRequest; 
07    
08 import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter; 
09    
10 public class MyStrutsFilter extends StrutsPrepareAndExecuteFilter{ 
11    
12     public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) { 
13         HttpServletRequest request = (HttpServletRequest) req; 
14         String url = request.getRequestURI(); 
15         try
16             if ("imageUp.jsp".equals(url.substring(url.length()-11))) { 
17                 chain.doFilter(req, res); 
18             else 
19                 super.doFilter(req, res, chain); 
20             
21         }catch(Exception e){ 
22             System.out.println("Exception in MyStrutsFilter"); 
23             e.printStackTrace(); 
24         
25     
26    
27 }

然后在web.xml中将struts2的过滤器换成这个类就行了:

1 <filter
2     <filter-name>struts2</filter-name
3     <filter-class>com.taiji.yagl.security.MyStrutsFilter</filter-class
4 </filter>

 

不过,这个imageUp.jsp也不是拿来就能用的,文件上传成功之后,它返回一个JSON格式的字符串,其中的url字段代表上传成功之后,通过url访问该文件的真实路径。ueditor根目录下的editor_config.js文件中的imagePath属性说是用来修正后台返回的“url”的,其实就是在“url”字符串的前面加上这个字符串而已。笔者直接将其置为空字符串""。 最后说一下文件上传位置的问题。默认是将文件上传到服务器部署的临时目录下的一个文件夹下;这样一旦服务器执行“clean”等清除操作,之前上传的文件都没了。而且图片或者附件这东西一般都比较大,直接传到服务器上,也不是长久之计,于是笔者建议将图片或附件上传到一个单独的服务器上。由于时间有限没有研究FTP服务器神马的高级玩意儿,笔者的方案是在服务器上用一个专用的账号(比如用户名guest,密码guest),共享一个专用的文件夹并对guest用户开放所有权限,然后把这个文件夹发布到web上。文件的上传使用了JCIFS的开源Smb组件;修改后的imageUp.jsp全文如下:

01 <%@ page language="java" contentType="text/html; charset=UTF-8" 
02     pageEncoding="UTF-8"%> 
03 <%@ page import="java.io.*"%> 
04 <%@ page import="org.apache.commons.fileupload.*" %> 
05 <%@ page import="org.apache.commons.fileupload.util.*" %> 
06 <%@ page import="org.apache.commons.fileupload.servlet.*" %> 
07 <%@ page import="org.apache.commons.fileupload.FileItemIterator" %> 
08 <%@ page import="org.apache.commons.fileupload.disk.DiskFileItemFactory" %> 
09 <%@ page import="java.util.regex.Matcher" %> 
10 <%@ page import="java.util.regex.Pattern" %> 
11 <%@ page import="java.util.Date" %> 
12 <%@ page import="jcifs.smb.SmbFile" %> 
13 <%@ page import="jcifs.smb.SmbFileInputStream" %> 
14 <%@ page import="jcifs.smb.SmbFileOutputStream" %> 
15    
16 <% 
17    
18 String filePath = "/fj_yagl/upload/image"
19 //文件保存的真实路径 
20 String realPath = "smb://guest:guest@WIN-FILESERVER/NetShare" + filePath; 
21 <pre name="code" class="java">//前端显示时,使用的文件路径前缀</pre>String urlPrefix = "http://192.168.19.133:8080/picServer";//判断路径是否存在,不存在则创建File dir = new File(realPath);SmbFile remoteDir = new SmbFile(realPath);if(!remoteDir.exists()) remoteDir.mkdirs();if(ServletFileUpload.isMultipartContent(request)){ 
22  DiskFileItemFactory dff = new DiskFileItemFactory(); dff.setRepository(dir); dff.setSizeThreshold(1024000); ServletFileUpload sfu = new ServletFileUpload(dff); FileItemIterator fii = sfu.getItemIterator(request); String title = ""//图片标题 String url = ""; 
23  //图片地址 String fileName = "";String state="SUCCESS"; while(fii.hasNext()){ FileItemStream fis = fii.next(); try{ if(!fis.isFormField() && fis.getName().length()>0){ fileName = fis.getName();Pattern reg=Pattern.compile("[.]jpg|png|jpeg|gif$");Matcher matcher=reg.matcher(fileName);if(!matcher.find()) 
24  {state = "文件类型不允许!";break;}fileName = newDate().getTime()+fileName.substring(fileName.lastIndexOf("."),fileName.length()); url = realPath+"\\"+fileName; BufferedInputStream in = newBufferedInputStream(fis.openStream());//获得文件输入流SmbFile smbFile = new SmbFile(url);BufferedOutputStream 
25  output = new BufferedOutputStream(new SmbFileOutputStream(smbFile)); Streams.copy(in, output, true);//开始把文件写到你指定的上传文件夹 }else{ String fname = fis.getFieldName(); if(fname.indexOf("pictitle")!=-1){ BufferedInputStream in = new BufferedInputStream(fis.openStream()); 
26  byte c [] = new byte[10]; int n = 0while((n=in.read(c))!=-1){ title = newString(c,0,n); break; } } } }catch(Exception e){ e.printStackTrace(); } }title = title.replace("&""&").replace("'""&qpos;").replace("\""""").replace("<", "<").replace(">", ">"); 
27  response.getWriter().print("{'url':'" + urlPrefix + filePath+"/"+fileName+"','title':'"+title+"','state':'"+state+"'}");}%> 
28 <pre></pre> 
29 <br> 
30 <p><span style="color:rgb(62,62,62); font-family:Simsun; line-height:18px"></span></p>
分享到:
评论

相关推荐

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑).doc

    SpringBoot整合layui和百度富文本编辑器ueditor入门使用教程 本教程将指导您如何将layui和百度富文本编辑器ueditor整合到SpringBoot项目中。ueditor是一种轻量、可定制、注重用户体验的富文本web编辑器,由百度的...

    百度富文本框(Ueditor)自定义上传接口,并解决单图片上传的跨域问题

    在开发Web应用时,我们经常会使用富文本编辑器来提供用户友好的文本输入体验,而百度的Ueditor是一个广泛使用的富文本编辑器。它提供了丰富的功能,如图片、视频、表格等插入,使得内容创作更加便捷。然而,在实际...

    百度控件ueditor图片上传到远程服务器解决方案

    百度控件ueditor图片上传到远程服务器解决方案 一、搭建ueditor环境 二、修改源码 三、重新编译源码 四、使用说明

    Spring+Vue整合UEditor富文本实现图片附件上传的方法

    Spring+Vue整合UEditor富文本实现图片附件上传的方法是指将UEditor富文本编辑器集成到Spring和Vue项目中,以实现图片附件上传的功能。下面将详细介绍这个方法的实现步骤和关键技术点。 UEditor富文本编辑器 ...

    Spring MVC+mybatis+easyui+ueditor+shiro权限框架管理系统

    4. UEditor:UEditor是由百度开发的一款富文本编辑器,具有丰富的编辑功能,如图片上传、视频插入、公式编辑等。它支持自定义配置,可以满足不同场景下的需求,为用户提供了一流的在线编辑体验。 5. Shiro:Apache ...

    百度富文本编辑器UEditor 1.4.3版本

    百度富文本编辑器UEditor是一款由百度公司开发的开源富文本编辑器,它在1.4.3版本中提供了丰富的功能和优秀的用户体验,适用于网页内容编辑、论坛发帖、博客写作等多种场景。UEditor以其易用性、稳定性和可定制性...

    百度富文本编辑器(ueditor)自定义上传接口(路径)

    百度ueditor编辑器将图片上传到非项目根路径(保存在磁盘上)或独立服务器解决方案 教程:https://blog.csdn.net/qq_16220645/article/details/78860497 源码已经修改好了,直接buildpath到项目里就OJBK

    ueditor自定义图片上传

    本篇文章将深入探讨如何解决ueditor上传图片时的跨域问题以及如何自定义图片上传插件。 首先,我们要理解什么是跨域(CORS)。跨域是指一个域下的文档或脚本尝试请求另一个域下的资源时,如果两个域不相同,则...

    百度富文本编辑器ueditor1.4.3 JSP版本案例(上传图片)

    ueditor1.4.3 富文本插件完美使用,搭建后可以直接上传图片以及多图片上传回显。主要的配置在config.json。可以查看官网ip,一般人出问题都是在config.json,或者不知道案例文件该怎么放,放哪里。

    百度富文本编辑器UEditorDemo

    2. **图片和文件上传**:在"百度富文本编辑器UEditor示例"中,图片和附件的上传功能是重点。用户可以直接在编辑器中上传本地图片或文件,编辑器会自动处理上传流程,大大简化了内容创作的过程。 3. **视频支持**:...

    百度富文本编辑器 ueditor 使用总结

    【百度富文本编辑器 ueditor 使用总结】 在Web开发中,富文本编辑器是一个不可或缺的工具,它允许用户以类似Word的方式编辑网页内容。百度的ueditor是一款功能强大的开源富文本编辑器,广泛应用于博客、论坛、CMS...

    百度Ueditor在线富文本编辑器

    **百度Ueditor在线富文本编辑器** 百度Ueditor是一款由百度公司开发的开源、免费的在线富文本编辑器,主要用于Web应用中提供便捷的文本编辑功能。它以其强大的功能、良好的用户体验以及易于集成的特点,被广泛应用...

    百度富文本编辑器ueditor上传图片宽高超范围问题2018.7.3补充

    【百度富文本编辑器ueditor上传图片宽高超范围问题详解】 在使用百度富文本编辑器ueditor时,用户可能会遇到一个常见的问题:当上传的图片尺寸超过预设限制时,图片在编辑器内显示不全,同时在网页发布后也可能导致...

    百度富文本编辑器Ueditor1.8.1完美版含文档,例子

    **百度富文本编辑器Ueditor 1.8.1详解** 在Web开发中,富文本编辑器是不可或缺的工具,它允许用户以类似Word的方式在网页上编辑内容,包括字体、颜色、样式、图片和链接等。百度Ueditor是一款开源的、功能强大的富...

    PHP版百度富文本编辑器ueditor

    **PHP版百度富文本编辑器ueditor** 在Web开发中,富文本编辑器是不可或缺的工具,它允许用户以类似于Microsoft Word的方式创建和编辑内容,然后以HTML格式存储。其中,百度开发的ueditor是一款非常受欢迎的开源富...

    andt design pro react + ueditor富文本

    1 ueditor 文件夹放到 public文件下 2 修改配置 如果是前后端分离部署,请求地址修改 ueditor.all.js 3 在config.ts里 headScripts添加配置 引入 文件 具体使用方法在另一个文章里面有

    UEditor 百度富文本编辑器 .Net实例 已解决上传图片问题

    1、UEditor 百度富文本编辑器完整版 .Net实例 已解决上传图片问题。 2、内附完整demo实例,附带txt讲解说明及UEditor常见问题解决方案。 3、已经调试好的百度文本编辑器实例,用户体验不错,具备很多人性化的功能,...

    Struts+Hibernate+UEditor

    百度UEditor富文本demo,使用目前最新1.4.3.1 jsp utf-8版本。关键类EditorController访问地址http://localhost:8080/project/editor!toAddOrEdit。jsp地址WebRoot/WEB-INF/jsp/editor

    ueditor_jsp 百度富文本编辑器

    **百度富文本编辑器——ueditor1_4_3_3-utf8-jsp详解** 在Web开发中,富文本编辑器(Rich Text Editor)扮演着至关重要的角色,它允许用户在网页上创建和编辑带有格式的文本,如字体、颜色、大小、对齐方式等。...

Global site tag (gtag.js) - Google Analytics