本教程用于七牛云上傳SDK：公開空間上傳
>[info] 使用語言為 **Python** 做后端，**Javascript** 做前端
Python后端作用： 向前端返回上傳憑證。
Javascript前端作用： 實現文件上傳，支持批量上傳，進度實時更新，返回外鏈等
Python環境： 3.5.2 64bit
**Python后端步驟：**
1. 安裝qiniu Python SDK，官網說適用于3.4以下版本，但親測3.5.2版本依然適用
~~~
pip install qiniu
~~~
2. 向前端返回上傳憑證，比如使用Django框架
2.1 在urls.py中配置url模式
~~~
url( r'^get_token$', views.get_token, name="get_token"),
~~~
2.2 在views.py中定義view，官網文檔規定：返回值必須是如下的json格式
~~~
{ 'uptoken': token_string }
~~~
以下是代碼
~~~
from qiniu import Auth
@csrf_exempt
def get_qiniu_token( request ):
q = Auth( access_key, secret_key )#在七牛個人頁面中可以查到
bucket_name = "test"
token = q.upload_token( bucket_name )#return a string represent token
return JsonResponse( {"uptoken": token} )
~~~
以上便是 Python后端的全部代碼
**JavaScript前端步驟：**
1. 引入Plupload，和qiniu Javascript SDK
~~~
<script src="http://cdn.bootcss.com/plupload/2.1.1/plupload.full.min.js"></script>
<script src="http://cdn.bootcss.com/qiniu-js/1.0.17/qiniu.min.js"></script>
~~~
2. 在頁面上定義一個dom，用于觸發上傳動作，后續Plupload會根據id對其初始化
~~~
<label id="browseFile" class="btn btn-warning">Browse Image</label>
~~~
3. 在頁面的Javascript中初始化七牛定制的Plupload，Plupload詳細配置，可以到Plupload官網查看文檔
~~~
var uploader = Qiniu.uploader({
browse_button: "browseFile",
uptoken_url: "/get_token",
get_new_uptoken: false,
unique_names: true,
domain: your_qiniu_domain_name,
max_file_size: "5mb",
max_retries: 3,
auto_start: true,
multi_selection: true,
/*image resize on client side*/
resize: {
width: 320,
},
init: {
"UploadProgress": function(up, file)//上傳進度實時更新
{
progressBar.style.width = up.total.percent + '%';
speed.innerHTML = (up.total.bytesPerSec / 1024).toFixed(2) + "KB/s";
},
"FileUploaded": function( up, file, info )//單個文件上傳完成事件，imageLink即為圖片外鏈
{
var domain = up.getOption( "domain" );
var response = JSON.parse( info );
var imageLink = domain + response.key;
allLink += response.key + ";";
createNewImage( imageLink );
},
"UploadComplete": function()//隊列內所有文件上傳完成事件
{
inputImageLink.value = allLink;
},
}
});
~~~
