爲圖片存儲而做——記一次UEditor源碼的修改

本文版權歸博客園和做者吳雙本人共同全部.

 寫在前面

這是一個數據爆發的網絡時代，你們習慣於瀏覽圖文直觀帶給咱們的快速信息。大圖片的存儲和瀏覽常常會成爲Web服務器的瓶頸。試想若是你的Web服務器依然將大量圖片存儲在其本地，而單頁面主要的信息在於圖片列表，在訪問量增加後，必定會面臨帶寬、磁盤IO的瓶頸。繼而形成Web服務器緩慢，而後又要作分佈式文件存儲，若是說本身實現簡易的多文件服務器存儲，能夠移步到這：http://www.cnblogs.com/tdws/p/6231308.html ，若是說本身搭建稍微複雜一些的，甚至帶處理圖片大小，像素，壓縮和緩存的話，你能夠移步Zimg  http://zimg.buaa.us/ 。

我目前採用的是七牛雲存儲，主要青睞於其容量和CDN，還有圖片瘦身問題的解決。既然解決的問題是Web服務器瓶頸，那麼必定要使用JS SDK, 就是JS直接將文件直傳給七牛雲。

 修改源碼爲了什麼

 爲了使用JS直接傳輸文件到雲存儲，而非經過文件傳輸到web服務器，再由web服務器post文件到雲存儲，由於後者的方式，實在是太不盡人意了，並且太low。

爲了實現第一種方式，而且上傳到雲存儲必需要攜帶認證的uptoken，才被認爲是有權限的，因此不得不簡單的修改一下源碼，使得上傳文件攜帶額外參數。

本次修改，主要實現了UEditor多文件上傳到雲存儲。單文件上傳UEditor使用iframe的方式，目前尚未解決，不過有了多文件上傳，單文件的也顯得不那麼重要了。其實實現的思路很簡單了，找到全部的圖片上傳的代碼，並在上傳前從web服務器獲取uptoken, 而後將其攜帶給ajax。

首先修改的是Ueditor 圖片彈出框所引用的image.js 

首先我將文件名給一個JS模擬生成的guid，而後請求Token，並設置爲同步，在上傳前，將token給到ajax請求所攜帶的data.這樣一來上傳的權限問題解決了。

第二步就是修改配置，config.json,重點在於imageUrl和imageUrlPrefix.

第三步，我發如今多圖上傳的時候，ueditor並無使用個人imageUrl，而依然使用默認的本項目的路徑。因此我經過搜索源碼後找到位置，並作了以下修改：

這個方法名稱叫作getActionUrl，增長一行判斷，若是action爲uploadImage時，使用個人imageUrl,做爲上傳的路徑，而不作其餘任何拼接，直接返回imageUrl。

 遇到的坑就是，七牛上傳文件參數的key名稱必定要是file。

另外百度富文本還要求了你上傳後，服務起的返回格式，經過設置雲存儲的ReturnBody來實現

 

-------

2018-01-11更新：

若是你要支持截圖的上傳，還有一點須要注意，在上面第三步中，判斷action的代碼 改一下 

if (action == "uploadimage" || action == "catchimage") {
return imageUrl;
}

------

 爲單圖上傳所作的努力

找了很久，找到了這段單圖上傳的源碼，你能夠看見其經過iframe和構造form對象。因此我作的修改就是請求token，並在success回調函數中給其加一個input，並把token做爲value給到input標籤。 

其上傳的回調函數以下：拋出跨域異常的也正是這個位置，目前尚未解決，若是必定要實現的話，可能要參照下百度ueditor二次開發的文檔。

 

 寫在最後

其實也沒有什麼精彩的地方，不過相信使用雲存儲的人愈來愈多，必定還會有人須要，給本身個參考，也給他人一個參考。