1. 程式人生 > >wangeditor上傳圖片踩坑注意事項

wangeditor上傳圖片踩坑注意事項

今天使用了wangeditor這個小的輕量富文字編輯器,本以為這樣簡易的外掛,api寫的也較為詳盡,簡潔易懂,應該使用過程不會遇到麻煩,輕而易舉便能完成。沒想到使用圖中卻頻繁踩坑。對此進行總結,希望給自己一個經驗,和使用wangEditor中遇到問題的朋友能快速解決。

1.圖片上傳大小的限制和上傳時間限制

editor.customConfig.uploadImgTimeout = 50000;

圖片上傳時間限制一定要設定夠大,我一開始設定為5000,以為已經足矣,結果每次上傳圖片後,客戶端的返回狀態都是cancel,因為我對自己設定的時間有自信,所以一開始沒想到這的問題,找了半天原因,最後回去把時間加了個0。OK了,

2.在tomcat server.xml中新增  disableUploadTimeout="false",我的是在<Connector中手動新增上去的如下:,網上還有說在server.xml中不同地方新增disableUploadTimeout="false",總之是控制返回時間的,不然客戶端等待時間過長會報404,之前就是因為這個問題我的圖片明明上傳成功,但前段狀態一直返回404。

 <Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
             disableUploadTimeout="false"
               redirectPort="8443" />

3.配置tomcat的對映路徑,在<Host></Host>z中新增     <Context path="/image" docBase="D:\image" reloadable="true" />  ,

這樣做的好處是將實際的D:\image路徑對映成tomcat下的/image路徑,當你啟動伺服器時,訪問http://localhost:8080/image/1538452726500.jpg,就能訪問到你實際儲存在D:\image下的檔案,path="/image"/中的image可以自己隨便起名,1538452726500.jpg是我的D盤下\image下的檔案。

在IDEA中,你在專案中使用Tomcat的時候,需要將Deploy applications configured in Tomcat instance這個選項勾選,這樣我們上面的配置才會生效。

4.另外要記得按wangEditor文件中的方式返回json,或者返回非json的資料也要按文件中給的返回非json資料得介面來呼叫,這裡的例項有很多,大家去網上一搜就有嗎、,我就不過多廢話了