DjangoUeditor 使用七牛雲端儲存

標籤：

DjangoUeditor 是一個相當贊的django 富文字編輯器，你可以在

https://github.com/zhangfisher/DjangoUeditor

查看相關資訊。

 

我一直想著把DjangoUeditor 的圖片和檔案儲存體修改為七牛雲端儲存，但又覺得自己js水平太菜，所以就一直拖延到現在，

其實我根本沒改js。

 

好了，下面不廢話，開始。

 

一、檔案上傳到七牛

在修改 DjangoUeditor 儲存到七牛之前，我第一步要嘗試的，就是本地檔案上傳到七牛。

這一步需要七牛的sdk

https://github.com/qiniu/python-sdk/releases

你可以用

pip install qiniu

安裝。

 1 >>> access_key = ‘your ak ‘ 2 >>> secret_key = ‘your sk‘ 3 >>> bucket_name = ‘your bucket name‘ 4  5 >>> from qiniu import Auth,put_file 6 >>> q = Auth(access_key, secret_key) 7 >>> PostFile = ‘images/Koala_20141220231309_308.jpg‘ 8  9 #PostFile  為上傳後所代表的檔案及路徑10 11 >>> token = q.upload_token(bucket_name, PostFile)12 >>> FilePath = ‘C:\\Users\\r3call\\Pictures\\Zhuoku001.jpg‘13 14 # FilePath 為本地檔案路徑15 >>> ret, info = put_file(token, PostFile, FilePath)16 >>> ret17 {u‘hash‘: u‘Fnpm2Sxt4_oiXtVdG8bONBsnIUAD‘, u‘key‘: u‘images/Koala_20141220231309_308.jpg‘}

一旦上傳成功， ret這個字典就會存在名為key的key，我們檢測這個key就可以判斷是否上傳成功。

 

二、DjangoUeditor 上傳檔案到七牛

既然第一步已經成功了，我們就有希望上傳檔案到七牛，我首先找到了DjangoUeditor 的處理檔案上傳的函數。

這裡說說我尋找的步驟：

1.找到urls.py

url(r‘^controller/$‘,get_ueditor_controller)

2、這樣我知道函數叫做get_ueditor_controller，那麼我到views.py中尋找

然後我找到了一個函數叫做 UploadFile ，這個函數對檔案上傳進行了 檢測和儲存

其中

state=save_upload_file(file,os.path.join(OutputPath,OutputFile))

是真正處理檔案儲存體的函數，我們來看看代碼

 1 #儲存上傳的檔案 2 def save_upload_file(PostFile,FilePath): 3     try: 4         f = open(FilePath, ‘wb‘) 5         for chunk in PostFile.chunks(): 6             f.write(chunk) 7     except Exception,E: 8         f.close() 9         return u"寫入檔案錯誤:"+ E.message10     f.close()11     return u"SUCCESS"

我要把檔案上傳到七牛，就需要仿照這個函數對檔案進行處理。

於是我編寫了一個函數如下：

 1 #儲存上傳檔案到七牛 2 def save_upload_file_to_qiniu(upload_file,key): 3     access_key = ‘your ak‘ 4     secret_key = ‘your sk‘ 5     bucket_name = ‘your bucket name‘ 6     try: 7         from qiniu import Auth,put_file,put_data 8         q = Auth(access_key, secret_key) 9         token = q.upload_token(bucket_name, key)10         # ret, info = put_file(token, key, upload_file)11         ret, info = put_data(token, key, upload_file)12         if ret.get(‘key‘,None) == None:13             raise Exception(‘upload error‘)14         else:15             return u"SUCCESS"16     except Exception, e:17         print(str(e))18         return str(e)

這個函數寫好之後，我要在哪裡調用呢？

state=save_upload_file(file,os.path.join(OutputPath,OutputFile))

我把這裡修改為

state= save_upload_file_to_qiniu(file,OutputPathFormat)

其中file是上傳過來的圖片，

OutputPathFormat  是產生圖片的檔案路徑，類似於 images/Penguins_20141221001519_634.jpg

檔案上傳之後，調用save_upload_file_to_qiniu 對檔案進行儲存，如果成功，就會返回 SUCCESS，我們把結果返回。

原始返回資訊如下

1     return_info = {2         ‘url‘: urllib.basejoin(USettings.gSettings.MEDIA_URL , OutputPathFormat) ,                # 儲存後的檔案名稱3         ‘original‘: upload_file_name,                  #原始檔案名4         ‘type‘: upload_original_ext,5         ‘state‘: state,                         #上傳狀態，成功時返回SUCCESS,其他任何值將原樣返回至圖片上傳框中6         ‘size‘: upload_file_size7     }

在返回之前，我們還需要定義一個變數

QINIU_BUCKET_DOMAIN = ‘http://hello.qiniudn.com/‘

這樣，QINIU_BUCKET_DOMAIN  和 OutputPathFormat 串連起來，就是一個完整的檔案 URL 地址，類似於

http://hello.qiniudn.com/images/Penguins_20141221001519_634.jpg

我們只需要返回這個URL 給前端即可

 1     #返回資料 2     QINIU_BUCKET_DOMAIN = ‘http://hello.qiniudn.com/‘ 3     return_info = { 4         # ‘url‘: urllib.basejoin(USettings.gSettings.MEDIA_URL , OutputPathFormat) ,                # 儲存後的檔案名稱 5         ‘url‘: urllib.basejoin(QINIU_BUCKET_DOMAIN , OutputPathFormat) ,                # 儲存後的檔案名稱 6         ‘original‘: upload_file_name,                  #原始檔案名 7         ‘type‘: upload_original_ext, 8         ‘state‘: state,                         #上傳狀態，成功時返回SUCCESS,其他任何值將原樣返回至圖片上傳框中 9         ‘size‘: upload_file_size10     }

 

到此，我們把 DjangoUeditor 的儲存改為七牛基本就結束了，如果需要管理檔案，或者將AK 和SK設定到設定檔中，你可能還有些活要做。

註：塗鴉功能並沒有使用同樣的檔案儲存體函數，如果需要，請單獨處理。

 

附：修改後的views.py 替換 DjangoUeditor 下的views.py 即可，需要自己填寫ak，sk，QINIU_BUCKET_DOMAIN

使用前需安裝 qiniu sdk

DjangoUeditor 使用七牛雲端儲存