百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)

时间:2021-05-01 12:16:16

最近做个小项目,项目要求把使用百度控件ueditor上传的图片存放在非工程目录下,指定到指定盘符,路径可配置,ueditor默认情况下存放在工程内部,如:

D:\soft\apache-tomcat-7.0.41\apache-tomcat-7.0.41\webapps\test\ueditor

现要求将图片存放到服务器外面,如以下路径(举例):

D:\demo\pic

同时显现前端展示图片,以及在ueditor富文本框中回显图片。

现将实现过程展示如下(较为粗糙,同时参考了别人实现过程,后面会给出相关链接)

1、首先在配置文件application.properties中配置路径如下:

百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)

2、修改ueditor导入包中两个文件的值:

百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)

其中config.json中修改值如下:

百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)

其中imageUrlPrefix设为空,imagePathFormat保持默认值;

然后修改controller.jsp中值:

百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下) 百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)

3、修改源码:导入修改之后的jar包

百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)

内部类主要修改如下:

百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)

百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)

其中遇到一个问题就是当时没修改源码,只是将controller.jsp中

ActionEnter(request, rootPath).exec()中的rootPath传配置好的绝对路径时,不能实现上传文件,修改源码之后才实现的!

注意:完成上面三步,只能实现将图片上传到配置路径中,不能实现在富文本框中的图片回显,即如下效果:

没有修改js时非常显示,其实这时图片已经实现上传,只是由于img标签src属性不正确。

百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)

正常显示:

百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)

实现图片即刻在文本框中显示效果,一般有两种效果,第一种就是配置tomcat的虚拟映射路径;第二种就是通过专门的action用数据流实现显示图片效果;这里介绍第二种!

4、项目使用spring框架,处理图片的action中方法如下:

百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)

而其中的image1.jsp如下所示,jsp中通过java代码实现图片流的显示!

<%@ page contentType="text/html; charset=utf-8" language="java"%>
<%@ page import=" java.sql.*,java.util.*,java.io.* " errorPage=""%>
<%@ include file="/views/common/taglib.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<%
out.clear();
out = pageContext.pushBody();
response.setContentType("image/png ");
try {
String imgName = request.getParameter("fileName");
String p1 = (String) session.getAttribute("impath");//获取配置文件中设置的图片上传路径
String path1 = p1+ imgName;//图片绝对路径
String path2 = p1+"/ueditor/error.jpg";
//判断该路径下的文件是否存在
File file = new File(path1);
if (file.exists() && !imgName.equals("")) {
DataOutputStream temps = new DataOutputStream(
response.getOutputStream());
DataInputStream in = new DataInputStream(
new FileInputStream(path1));

byte[] b = new byte[2048];
while ((in.read(b)) != -1) {
temps.write(b);
temps.flush();
}

in.close();
temps.close();
} else {
DataOutputStream temps = new DataOutputStream(
response.getOutputStream());
DataInputStream in = new DataInputStream(
new FileInputStream(path2));

byte[] b = new byte[2048];
while ((in.read(b)) != -1) {
temps.write(b);
temps.flush();
}

in.close();
temps.close();
}

} catch (Exception e) {
out.println(e.getMessage());
}
%>

5、完成上面4步还是不能完成实现富文本框中图片回显,需要修改ueditor中的js文件ueditor.all.js中代码,因为此处需要修改的是上传图片img标签下的src属性,默认情况下,该src取值是上面的

imagePathFormat值,此处需要修改src属性值,前面加一个string值,
百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)
百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)

修改后,即可见src属性变为如下:

百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)

百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)

网页代码如下:

百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)

该处src路径即可完成图片的请求,该请求通过上面的action的image1方法实现。百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)

到这时,即实现图片上传的非工程目录的指定路径下


参考文章如下(应用的是此文给出的jar包,表示感谢):

http://blog.csdn.net/ouyhong123/article/details/44461689