本教程用于七牛云上传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;
},
}
});
~~~
