解決Ueditor編輯器上傳圖片的路徑問題
之前發(fā)表過一篇Ueditor編輯器的配置以及使用的教程:
http://blog.csdn.net/gfd54gd5f46/article/details/60887313
這篇文章是對(duì)Ueditor編輯器圖片上傳保存的優(yōu)化,。
遇到的問題:
- 用Eclipse開發(fā)WEB項(xiàng)目的時(shí)候,,使用到了Ueditor上傳圖片的功能,插件會(huì)自動(dòng)將上傳的圖片保存在Eclipse工作目錄下,,這種保存的方式非常不利于后續(xù)對(duì)圖片的操作(管理),,這時(shí)我們就要修改Ueditor的源碼,解決上傳圖片時(shí)的路徑問題,。
官方文檔:http://fex.baidu.com/ueditor/
在線API文檔:http://ueditor.baidu.com/doc/
GitHub地址:https://github.com/fex-team/ueditor
1,、下載ueditor源碼并引用到工程

將jsp/src/目錄下的所有文件拷貝到你的工程下

目錄視圖

將ueditor-1.1.2.jar刪除,只引用前四個(gè)jar包

2,、修改Tomcat服務(wù)器配置,,添加圖片映射路徑

在tomcat中添加圖片的絕對(duì)路徑和圖片訪問虛擬路徑


修改config.json 配置文件,訪問路徑填寫剛配置的虛擬目錄

3,、創(chuàng)建配置文件(可省略)
在src目錄下創(chuàng)建config.properties ,,存放圖片路徑
讀配置文件的目的是為了動(dòng)態(tài)修改保存路徑,可以更方便的管理圖片

創(chuàng)建ConfigUtil.java 類,,用于讀取配置文件
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.util.Properties;
/**
* 用于讀取配置文件
* @author LingDu
*/
public class ConfigUtil {
private static Properties pro;
static{
pro=new Properties();
//默認(rèn)從類的所在包目錄開始查找資源文件
//如果要classpath的根目錄開始找,,必須加上/
/*InputStream input=PropertiesUtil.class.
getResourceAsStream("/config.properties");*/
//默認(rèn)從classspath的根目錄開始查找資源文件
InputStream input=ConfigUtil.class
.getClassLoader()
.getResourceAsStream("config.properties");
try {
pro.load(new InputStreamReader(input,
"UTF-8"));
} catch (IOException e) {
e.printStackTrace();
}finally{
if(input!=null){
try {
input.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
public static String get(String key){
return pro.getProperty(key);
}
public static int getInt(String key){
return Integer.parseInt(pro.getProperty(key));
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48

4、修改源碼(修改圖片保存路徑)
選中項(xiàng)目,,使用Eclipse文件搜索功能

搜索 physicalPath

找到在3個(gè)類中使用到了 physicalPath

這里有3個(gè)類的是要修改源碼的
//注釋掉原來的路徑代碼
//String physicalPath = this.rootPath + savePath;
- 使用自定義的路徑(這個(gè)路徑是通過配置文件讀取的,相當(dāng)于取代源碼中的
this.savePath )
注意:ConfigUtil.get("savepath") ,,字段名必須一樣,否則讀取不了
ImageHunter.java

Base64Uploader.java

BinaryUploader.java

5,、測(cè)試:
往編輯器添加一張圖片

再來看看圖片保存目錄

通過改源碼的方式就能成功對(duì)圖片進(jìn)行統(tǒng)一管理了,。
6、在strtus中使用Ueditor編輯器需要注意
如果配置文件中配置了過濾所有的請(qǐng)求,,需要將其設(shè)置成只過濾.action 的請(qǐng)求,,否則導(dǎo)致文件保存不成功的情況。

|