wangeditor使用以及讀取本地檔案錯誤解決（思想教訓深刻啊）
由於專案需要富文字編輯器來設計網站後臺，所以選擇了wangeditor富文字編輯器。
一、生成富文字編輯器
<div class="formDiv">
<h3>內容</h3>
<div style="width: 100%;max-width: 1000px;margin-left: 30px;">
<div id="div1" style="height: 400px; max-height: 500px;">
</div>
</div>
</div>
var editor = new wangEditor('div1');
editor.config.menus = [
'source',
'bold',
'underline',
'italic',
'strikethrough',
'eraser',
'forecolor',
'bgcolor',
'|',
'quote',
'fontfamily',
'fontsize',
'head',
'unorderlist',
'orderlist',
'alignleft',
'aligncenter',
'alignright',
'|',
'link',
'unlink',
'table',
'img', //配置上上傳圖片按鈕
'|',
'undo',
'redo'
];
//修改了原始碼不單獨上傳，但必須配置路徑才能顯示上傳按鈕
editor.config.uploadImgUrl = 'TbWebConsultManageActionAjax_upload.action'; //點選上傳圖片以後往後臺儲存圖片，並返回回撥路徑（本地路徑、網路路徑、專案路徑，也可以是一個action請求）
editor.config.uploadImgFileName = 'consult'; //接收檔案的name域，後臺接收的臨時檔案 File fileName fileContentType，跟傳統的上傳檔案一樣
editor.config.hideLinkImg = true;
editor.create();
二、點選上傳接收檔案
public void upload() throws Exception{
ActionContext.initialize(ServletActionContext.getRequest(),
ServletActionContext.getResponse());
if(null !=consult){
String[] substr = consultFileName.split("\\.");
storageName = UUIDGenerator.getUUID()+"."+substr[substr.length-1];
FileUtils.saveFile(consult,FilePath.WEBSITE_CONSULT, storageName);
}
System.out.println("================================================================");
System.out.println(FilePath.WEBSITE_CONSULT + File.separator + storageName);
// ServletActionContext.getResponse().getWriter().write("http://localhost:8088/project/upload/AOP.png");
// ServletActionContext.getResponse().getWriter().write(FilePath.WEBSITE_CONSULT + File.separator + storageName);
ServletActionContext.getResponse().getWriter().write("TbWebConsultManageActionAjax_getImg.action?storageName="+storageName);
}
三、用流的方式讀取檔案
public void getImg() throws Exception{
FileInputStream fis = null;
BufferedInputStream bis = null;
OutputStream os = null;
try{
fis = new FileInputStream(FilePath.WEBSITE_CONSULT+File.separator+storageName);
bis = new BufferedInputStream(fis);
os = this.getHttpResponse().getOutputStream();
int len =0;
byte[] buf = new byte[4096];
while ((len = fis.read(buf)) > 0) {
os.write(buf,0,len);
}
}catch(Exception e){
throw e;
}finally{
try{
if(os != null){
os.flush();
os.close();
}
if(bis != null){
bis.close();
}
if(fis != null){
fis.close();
}
}catch(Exception e){
throw e;
}
}
}
四、遇到的問題
第一、在用wangeditor開發圖片的時候，受//修改了原始碼不單獨上傳，但必須配置路徑才能顯示上傳按鈕 專案經理這句話的影響，一直以為配置了
editor.config.uploadImgUrl = 'TbWebConsultManageActionAjax_upload.action'; 這個上傳路徑才能出來上傳按鈕，最後看文件才知道上傳按鈕時需要配的'img', //配置上上傳圖片按鈕。 這個上傳路徑只不過是點
擊上傳後發的一個請求（servlet或者action）汗，自己學藝不精。
第二、在上傳檔案後，需要返回一個返顯圖片路徑或者說請求，一開始我是返顯的本地路徑，返回來這個本地，
即ServletActionContext.getResponse().getWriter().write(FilePath.WEBSITE_CONSULT + File.separator + storageName);
但是在返顯圖片的過程中會出現錯誤：Not allowed to load local resource: file:///D:/MftccFundSystemFiles/website/consult/830f674b6c55fe6e0a7cb1b1dd686e2e.png，找
文件發現瀏覽器為了安全起見，不允許直接訪問本地檔案，需要在tomcat中加一個虛擬目錄：
解決方案：
<Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true" xmlNamespaceAware="false" xmlValidation="false">
<Context path="/" docBase="D:\MftccFundSystemFiles\website\consult" debug="0" reloadable="true"/>
<Context docBase="fund" path="/fund" reloadable="false" source="org.eclipse.jst.jee.server:fund"/>
</Host>
在tomcat的server.xml中加上這句話，指定本地檔案的目錄。在訪問的時候直接寫相對路徑。OK。問題解決（直接配置專案路徑是可以直接訪問的）
圖片返顯到了富文字編輯器中；
第三：這麼做下來被專案經理一頓批，說這樣的怎麼能從本地路徑中讀取檔案呢，如果不在同一個伺服器上怎麼辦。哎，自己考慮問題不全面啊。於是接著改成請求的方式：
ServletActionContext.getResponse().getWriter().write("TbWebConsultManageActionAjax_getImg.action?storageName="+storageName);
所以總結下來，系統訪問本地路徑一定要用流的方式來做。
五、總結
wangEditor富文字編輯器上傳圖片的道理其實很簡單，就是把圖片上傳到你指定的位置，然後你返回給wangEditor一個路徑，wangEditor會生成一個img標籤儲存到資料
庫中。
<img src="TbWebConsultManageActionAjax_getImg.action?storageName=eb7584b26db0d6e63a04e584eb9fa10b.png" alt="secondarytile" style="max-width:100%;">
然後在編輯器中顯示出圖片時，會去找src路徑的圖片。