DjangoUeditor 使用七牛雲存儲

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

https://github.com/zhangfisher/DjangoUeditor

查看相關信息。

 

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

其實我根本沒改js。

 

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

 

一、文件上傳到七牛

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

這一步需要七牛的sdk

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

你可以用

pip install qiniu

安裝。

>>> access_key = 'your ak '
>>> secret_key = 'your sk'
>>> bucket_name = 'your bucket name'

>>> from qiniu import Auth,put_file
>>> q = Auth(access_key, secret_key)
>>> PostFile = 'images/Koala_20141220231309_308.jpg'

#PostFile  為上傳后所代表的文件及路徑

>>> token = q.upload_token(bucket_name, PostFile)
>>> FilePath = 'C:\\Users\\r3call\\Pictures\\Zhuoku001.jpg'

# FilePath 為本地文件路徑
>>> ret, info = put_file(token, PostFile, FilePath)
>>> ret
{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))

是真正處理文件存儲的函數，我們來看看代碼

#保存上傳的文件
def save_upload_file(PostFile,FilePath):
    try:
        f = open(FilePath, 'wb')
        for chunk in PostFile.chunks():
            f.write(chunk)
    except Exception,E:
        f.close()
        return u"寫入文件錯誤:"+ E.message
    f.close()
    return u"SUCCESS"

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

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

#保存上傳文件到七牛
def save_upload_file_to_qiniu(upload_file,key):
    access_key = 'your ak'
    secret_key = 'your sk'
    bucket_name = 'your bucket name'
    try:
        from qiniu import Auth,put_file,put_data
        q = Auth(access_key, secret_key)
        token = q.upload_token(bucket_name, key)
        # ret, info = put_file(token, key, upload_file)
        ret, info = put_data(token, key, upload_file)
        if ret.get('key',None) == None:
            raise Exception('upload error')
        else:
            return u"SUCCESS"
    except Exception, e:
        print(str(e))
        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，我們把結果返回。

原始返回信息如下

    return_info = {
        'url': urllib.basejoin(USettings.gSettings.MEDIA_URL , OutputPathFormat) ,                # 保存后的文件名稱
        'original': upload_file_name,                  #原始文件名
        'type': upload_original_ext,
        'state': state,                         #上傳狀態，成功時返回SUCCESS,其他任何值將原樣返回至圖片上傳框中
        'size': upload_file_size
    }

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

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

這樣，QINIU_BUCKET_DOMAIN  和 OutputPathFormat 連接起來，就是一個完整的文件 URL 地址，類似於

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

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

    #返回數據
    QINIU_BUCKET_DOMAIN = 'http://hello.qiniudn.com/'
    return_info = {
        # 'url': urllib.basejoin(USettings.gSettings.MEDIA_URL , OutputPathFormat) ,                # 保存后的文件名稱
        'url': urllib.basejoin(QINIU_BUCKET_DOMAIN , OutputPathFormat) ,                # 保存后的文件名稱
        'original': upload_file_name,                  #原始文件名
        'type': upload_original_ext,
        'state': state,                         #上傳狀態，成功時返回SUCCESS,其他任何值將原樣返回至圖片上傳框中
        'size': upload_file_size
    }

 

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

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

 

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

使用前需安裝 qiniu sdk