173.七牛JS和Python的SDK使用 · Flask notebook

### 在網站中使用七牛存儲文件 #### 安裝sdk ``` pip install qiniu ``` #### 編寫獲取uptoken的接口 ``` @app.route('/uptoken/') def uptoken(): # AK access_key = "xxxxxxx" # SK secret_key = "xxxxxxx" # 驗證 q = qiniu.Auth(access_key,secret_key) # 儲存空間名字 bucket = "tokimeki" token = q.upload_token(bucket) return jsonify({"uptoken":token}) ``` ![](/assets/173-01.png) 在前端中添加js的sdk:七牛為javascript提供了一個專門用來傳文件的接口 ``` <script src="https://cdn.staticfile.org/Plupload/2.1.1/moxie.js"></script> <script src="https://cdn.staticfile.org/Plupload/2.1.1/plupload.dev.js"></script> <script src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.js"></script> ``` 在前段添加zlqiniu.js，js文件封裝了七牛的初始化和配置相關的參數 ``` <script src{{ url_for('static',filename='zlqiniu.js') }}""></script> ``` zlqiniu.js ``` 'use strict'; var zlqiniu = { 'setUp': function(args) { var domain = args['domain']; var params = { browse_button:args['browse_btn'], runtimes: 'html5,flash,html4', //上傳模式，依次退化 max_file_size: '500mb', //文件最大允許的尺寸 dragdrop: false, //是否開啟拖拽上傳 chunk_size: '4mb', //分塊上傳時，每片的大小 uptoken_url: args['uptoken_url'], //ajax請求token的url domain: domain, //圖片下載時候的域名 get_new_uptoken: false, //是否每次上傳文件都要從業務服務器獲取token auto_start: true, //如果設置了true,只要選擇了圖片,就會自動上傳 unique_names: true, multi_selection: false, filters: { mime_types :[ {title:'Image files',extensions: 'jpg,gif,png'}, {title:'Video files',extensions: 'flv,mpg,mpeg,avi,wmv,mov,asf,rm,rmvb,mkv,m4v,mp4'} ] }, log_level: 5, //log級別 init: { 'FileUploaded': function(up,file,info) { if(args['success']){ var success = args['success']; file.name = domain + file.target_name; success(up,file,info); } }, 'Error': function(up,err,errTip) { if(args['error']){ var error = args['error']; error(up,err,errTip); } }, 'UploadProgress': function (up,file) { if(args['progress']){ args['progress'](up,file); } }, 'FilesAdded': function (up,files) { if(args['fileadded']){ args['fileadded'](up,files); } }, 'UploadComplete': function () { if(args['complete']){ args['complete'](); } } } }; // 把args中的參數放到params中去 for(var key in args){ params[key] = args[key]; } var uploader = Qiniu.uploader(params); return uploader; } }; ``` 初始化七牛:使用以下代碼初始化七牛，配置一些參數 ``` window.onload = function () { zlqiniu.setUp({ /*http://7xqenu.coml.z0.glb.clouddn.com/*/ 'domain': 'http://pdhjzz2pa.bkt.clouddn.com/', 'browse_btn': 'upload-btn', 'uptoken_url': '/uptoken/', 'success': function (up,file,info) { console.log(info) } }); } ``` 參數解釋: * browser\_btn:按鈕id * uptoken\_url:uptoken的視圖url * domain:域名 --- index.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.staticfile.org/Plupload/2.1.1/moxie.js"></script> <script src="https://cdn.staticfile.org/Plupload/2.1.1/plupload.dev.js"></script> <script src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.js"></script> <script src="{{ url_for('static',filename='zlqiniu.js') }}"></script> <script> window.onload = function () { zlqiniu.setUp({ /*http://7xqenu.coml.z0.glb.clouddn.com/*/ 'domain': 'http://pdhjzz2pa.bkt.clouddn.com/', 'browse_btn': 'upload-btn', 'uptoken_url': '/uptoken/', 'success': function (up,file,info) { var image_url = file.name var imageInput = document.getElementById("image-input"); imageInput.value = image_url; var im = document.getElementById("img"); im.setAttribute("src",image_url); } }); } </script> </head> <body> <button id="upload-btn">上傳文件</button> <input type="text" id="image-input"> <img src="" alt="" id="img"/> </body> </html> ```