背景:項(xiàng)目中涉及到表單數(shù)據(jù)提交,其中還包含有圖片。
關(guān)于如何保存圖片,我一開始有兩種思路:
- 將圖片轉(zhuǎn)換成二進(jìn)制字節(jié)流,然后保存到數(shù)據(jù)表當(dāng)中(項(xiàng)目中用的是Oracle數(shù)據(jù)庫,保存二進(jìn)制字節(jié)流的那個(gè)字段定義成blob類型就可以了)。
- 將圖片上傳到服務(wù)器,然后數(shù)據(jù)表中保存的是文件名(如 eakon.jpg)。只保存文件名是出于這樣的考慮:因?yàn)楝F(xiàn)在只給我們項(xiàng)目組分配了一臺服務(wù)器,以后圖片可能要放到專門的文件服務(wù)器上,如果現(xiàn)在把路徑也保存到數(shù)據(jù)表當(dāng)中去的話我怕到時(shí)候萬一項(xiàng)目的部署方式一改就會牽扯到很多東西,所以就直接保存?zhèn)€文件名。如果要將圖片展示在前臺頁面上的話,就在業(yè)務(wù)層拼接一下絕對路徑/相對路徑。
一開始我選擇了第一種方式,即將圖片轉(zhuǎn)換成二進(jìn)制字節(jié)流編碼然后存到數(shù)據(jù)表的大數(shù)據(jù)字段當(dāng)中去,后來也是考慮到項(xiàng)目后期部署的問題,以及圖片展示的問題--------假如要將圖片展現(xiàn)在前臺頁面,首先要將該圖片對應(yīng)的存儲在數(shù)據(jù)表中二進(jìn)制數(shù)據(jù)取出來,取出來之后還要涉及到一系列的數(shù)據(jù)格式轉(zhuǎn)換問題。因?yàn)椴荒苤苯訉⒍M(jìn)制數(shù)據(jù)直接傳到j(luò)sp頁面,在此之前還要對其進(jìn)行處理。覺得比較麻煩,所以后來選擇了第二種方式來對圖片進(jìn)行上傳的操作。
一開始在Action中老是獲取不到上傳的文件,一時(shí)不知道是什么原因。后來把圖片上傳涉及到的代碼重新檢查了一下,然后修改了一下攔截器又能上傳圖片了,暫時(shí)沒找到原因在哪里。先總結(jié)一下在上傳文件(這里只針對圖片文件,其他文件可能還涉及到設(shè)置編碼字符集的問題,以后遇到了再總結(jié))的過程中需要注意的地方。
我這里用的是jsp表單提交的方式,沒有使用Ajax
jsp頁面里面需要注意的地方:
- 在form標(biāo)簽中 enctype 屬性應(yīng)該設(shè)置為 "multipart/from-data"
- 文件域的name和后臺Action中接收文件的變量名要一致
- 提交按鈕應(yīng)為 submit 標(biāo)簽
Struts2配置時(shí)需要注意的地方
一定要配置一個(gè)屬性指定文件存放的臨時(shí)目錄。如果是使用xml文件進(jìn)行配置的話,需在Struts.xml文件中進(jìn)行如下配置:
關(guān)于攔截器
我是在action標(biāo)簽中嵌了一個(gè)攔截器,最好是用<interceptor-ref name="" class="" ></interceptor-ref>的方式定義攔截器然后添加到攔截器棧里面去,需要用的時(shí)候再到action里面引用比較好,可以做到代碼復(fù)用
關(guān)于處理文件上傳的Action
- 需要定義一個(gè)File類型的變量來接收從前臺傳過來的文件(其實(shí)文件從前臺傳過來之后,會保存在我們定義的臨時(shí)存放目錄里面,然后在完成了Action中對應(yīng)的方法之后系統(tǒng)會把臨時(shí)目錄里面的臨時(shí)文件給清除)。
- 比如說 File 類型的變量名字為 File eakon。我們可以再定義三個(gè)String類型的變量,分別為 title, eakonFileName, eakonContentType。可以獲取到 文件標(biāo)題、文件名以及文件的類型(必須引入上面的兩個(gè)jar包,并且按照 文件類型變量名+FileName, 文件類型變量名+ContentType才能獲取到文件名以及文件類型)。但是要記得生成對應(yīng)的get/set方法。
只要注意以上幾點(diǎn),上傳圖片的功能基本就能實(shí)現(xiàn)了(有一些具體的業(yè)務(wù)代碼就不貼了,只貼一個(gè)主要的函數(shù))。
在前臺頁面輸入需要提交的信息:
點(diǎn)擊保存之后觸發(fā)對應(yīng)的action,在調(diào)用對應(yīng)的Action中的函數(shù)之前,首先會被攔截器攔截,判斷上傳的文件類型以及大小是否符合定義的要求,如果符合,那就進(jìn)入對應(yīng)的method進(jìn)行處理。
下面這個(gè)函數(shù)的功能就是將臨時(shí)目錄下面的文件里面的內(nèi)容復(fù)制到指定路徑下的文件當(dāng)中
@Override
/*將文件保存到路徑為fileName的地方,其中fileName包括了文件名以及路徑
* @param file 從前臺獲取到的文件
* @param filePath 路徑+文件名
* */
private static final int BUFFER_SIZE = 16*1024;//文件緩沖區(qū)大小
public void copyAndSaveFile(File file,String filePath) throws IOException{
File dst = new File(filePath);
InputStream in = null;
OutputStream out = null;
try{
in = new BufferedInputStream(new FileInputStream(file),BUFFER_SIZE);
out = new BufferedOutputStream(new FileOutputStream(dst),BUFFER_SIZE);
byte[] buffer = new byte[BUFFER_SIZE];
int len = 0;
while( (len=in.read(buffer)) > 0){
out.write(buffer, 0, len);
}
}catch(Exception e){
e.printStackTrace();
}finally{
if(null != in){
try{
out.close();
}catch(IOException e){
e.printStackTrace();
}
}
}
}
經(jīng)過上述處理,文件已經(jīng)保存到了目標(biāo)文件夾下面:
在數(shù)據(jù)表中的對應(yīng)字段,只保存了文件名:
如果需要將圖片在前臺頁面顯示出來,只需取出對應(yīng)的文件名,然后加上訪問路徑傳到前臺 img 標(biāo)簽的src屬性即可