KindEditor圖片上傳到七牛雲

自己做了一個網站，編輯器用的是KindEditor，平時會涉及到KindEditor內建的圖片上傳，但是伺服器用的是虛擬機器主機，沒多少空間，就一直想著把圖片放在免費的雲端儲存空間，之前看KindEditor的源碼和七牛的SDK看得雲裡霧裡的，網上搜尋又沒有類似的解決方案，只好繼續看源碼自己搞了，弄了整整一個晚上，基本實現了，下面說說我的做法：

版本說明：

KindEditor版本：4x

七牛SDK：7.x.x

後端指令碼：PHP

先看一下七牛給出的表單範本，在這裡file和token這兩個表單項是必須的

1.修改KindEditor的plugins/image/image.js檔案

在第20行這裡把上傳檔案的name欄位改成和七牛的一致，即name="file"，注釋的那行是原代碼

第二處改動是本地圖片上傳部分，這裡只做本地圖片上傳的修改，其他都是類似的，包括檔案的上傳

將action的地址改為七牛的上傳入口：http://upload.qiniu.com/，原本的處理地址是/php/upload_json.php

添加一個隱藏的表單項：

至於file項這裡看不到是因為它是另外載入的，就是hiddenElements.join('');這個，前面已經把file的name改了就好了

到這裡，我們已經把基本的表單項添加到KindEditor了，但是token現在並沒有value，接下來是實現ajax向伺服器擷取token

我的做法是直接在image.js這個檔案的末尾寫了個擷取的token的函數：

這裡因為是非同步方式，我只好使用jQuery去更改上面token的value，當然，用原生js實現會更好，不用去載入jQuery，我自己用getElementById去直接設定value貌似不行，折騰了好久不知道什麼原因，本來jQuery的用的是val()方法也不奏效，只好給成attr()

上面這個是上傳之後的回呼函數，返回的資料是json格式，兩個參數，當然後面添加處理回調的程式，回調參數個數可以自行設定

上傳成功：

{"error":0,"url":"https:\/\/dn-lanbaidiao.qbox.me\/FryyQrpKYDDZrkJGWchh9_9og6Du"}

上傳失敗：

{"error":1,"message":"xxx錯誤資訊"}

ps，這個函數不需要做任何修改，視個人情況而定，這裡只是做一下說明

到這裡，KindEditor就修改完成了，接下來是修改七牛的php檔案以及增加一個callBack.php和getToken.php

2.後端代碼的修改

先下載七牛的SDK源碼，我這裡使用的是PHP的：七牛SDK(PHP版本)

目錄結構是這樣

主要修改src/Qiniu/Auth.php這個檔案，並在相同目錄下添加callBack.php和getToken.php，即

#1 Auth.php

主要是添加一個可以自己處理上傳事件的回調檔案，即callBack.php，這裡要注意的是回調地址必須和網站地址同個網域名稱下，不然js會報跨域錯誤，因為KindEditor使用的是frame來處理圖片上傳，這也是為什麼我不直接用七牛的回調而是自己寫一個，我在這裡琢磨了好久才發現

要用自己的回調的前提是要讓七牛的回調地址跳轉到你的回調地址，並把回調參數傳給你的回調程式，所以添加一個returnUrl

接下來先寫getToken.php即產生你的七牛token，如果不知道七牛的使用原理，建議先去看一下官方文檔：七牛文檔

然後是callBack.php(代替了原來kindEditor的upload_json.php的作用)，自己根據情況設定參數，但要和image.js保持一致性

最後再用kindEditor測試一片上傳，地址已經變成了七牛雲端儲存的地址了，大大減輕了自己伺服器流量和儲存空間的壓力

以上就介紹了KindEditor圖片上傳到七牛雲，包括了方面的內容，希望對PHP教程有興趣的朋友有所協助。

