KindEditor圖片上傳到七牛雲

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

版本說明：

KindEditor版本：4x

七牛SDK：7.x.x

七牛SDK：7.x.x

。

先看一下七牛給的表單模板，在這裡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就修改完成了，接下來是修改七牛的文件

2.後端程式碼的修改先下載七牛的SDK來源碼，我這裡使用的是PHP的：七種牛；這樣

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

#1 Auth.php

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

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

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

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

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

以上就介紹了KindEditor圖片上傳到七牛雲，包含了面向的內容，希望對PHP教學有興趣的朋友有幫助。