前端 | 使用 webuploader 上傳到七牛雲存儲簡單例子

背景

在作應用時，考慮到應用的會產生不少圖片，爲了省勁，就選擇了七牛雲存儲，使用雲存儲的好處你們都是有感的，但仍是有一點點擔憂，若是使用的第三方雲存儲掛掉了，(=@__@=)，這是後話

前臺使用的上傳組件選擇了webuploader，我設計的業務流程以下

前端圖片上傳到七牛，七牛返回圖片的名稱，而後前端把返回的數據填充到指定的表單中，而後再次提交到後臺，保存到數據庫中，路子大體是這樣的

後臺選擇了 django-1.6.7, 至於爲何不用更高級的版本，或許是 south 用的過久了，太爽了，因此七牛的 SDK，選用了 python 版本的 SDK

環境版本依賴

• python: 2.7.6
• django: 1.6.7
• qiniu SDK： 7.0.4
• webuploader: 0.1.6

Token 生成

下面這段偷懶 粘貼過來的

在七牛雲存儲中，整個上傳流程大致分爲這樣幾步：

1. 業務服務器頒發上傳憑證給客戶端（終端用戶）
2. 客戶端憑藉 上傳憑證 上傳文件到七牛
3. 在七牛得到完整數據後，發起一個 HTTP 請求回調到業務服務器
4. 業務服務器保存相關信息，並返回一些信息給七牛
5. 七牛原封不動地將這些信息轉發給客戶端（終端用戶）

這裏的上傳憑證即爲 Token, 在個人這個例子中，直接省去了第三步和第四步，若是須要走第三步和第四步，能夠查看相應的文檔

Token 生成業務代碼

from qiniu import Auth

class AddView(TemplateView):
  template_name = 'xx.html'

  def get_context_data(self, **kwargs):
    q = Auth(access_key, secret_key)
    token = q.upload_token('xxx')
    context = super(AddView, self).get_context_data(**kwargs)
    context['token'] = token
    return context

這樣就把 Token 傳入到視圖中，若是想圖省事，能夠把這段生成業務封裝成一個中間件

webuploader 聲明

WebUploader.create({
    swf: 'xxxx/libs/webuploader/Uploader.swf',
    server: 'http://up.qiniu.com/',
    pick: '#xxxxx',
    resize: false,
    fileNumLimit: xxx,
    auto: true,
    formData: {
      token: {token 傳入後臺生成的Token} 
    }
  });

上傳成功以後，七牛返回

Object {
    hash: "FtsE1LaEX5dqGOoY2l1sqGX62WMV", 
    key: "FtsE1LaEX5dqGOoY2l1sqGX62WMV",
    _raw: '{
        "hash":"FtsE1LaEX5dqGOoY2l1sqGX62WMV",
         "key":"FtsE1LaEX5dqGOoY2l1sqGX62WMV"
    }
}

如此

你在七牛創建的指定空間的默認地址 + 返回的 hash 值，即爲你上傳到七牛的路徑

舉例：

最後

這只是一個最簡單的例子，裏面有不少的玩法，前端和後端都是，看你怎麼玩了