app.py代码
1 from flask import Flask, render_template, jsonify 2 import qiniu 3 4 app = Flask(__name__) 5 6 7 @app.route('/') 8 def hello_world(): 9 return render_template('index.html') 10 11 12 @app.route("/uptoken/") 13 def uptoken(): 14 access_key = 'Zrn4qlgRr6B56e3XspseFU0EJwdBL1WmM9Awy4EX' 15 secret_key = 'ArE9zHWaYp0OR35rqRnGbi8THJJHCuzGf9-s0QqC' 16 17 # 创建qiniu对象 18 q = qiniu.Auth(access_key, secret_key) 19 20 # 储存空间的名称 21 bucket = 'yiww' 22 23 # 参数存储空间的名字 24 token = q.upload_token(bucket) 25 return jsonify({'uptoken': token}) 26 27 28 if __name__ == '__main__': 29 app.run(debug=True)
index代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="{{ url_for('static',filename='jquery-1.12.4.min.js') }}"></script> 7 <script src="https://cdn.staticfile.org/Plupload/2.1.1/moxie.js"></script> 8 <script src="https://cdn.staticfile.org/Plupload/2.1.1/plupload.dev.js"></script> 9 <script src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.js"></script> 10 <script src="{{ url_for('static',filename='qiniu.js') }}"></script> 11 <script> 12 window.onload = function () { 13 qiniu.setUp({ 14 'domain': 'qe667nnln.bkt.clouddn.com/', 15 'browse_btn': 'upload-btn', 16 'uptoken_url': '/uptoken/', 17 'success': function (up,file,info) { 18 var file_url = file.name; 19 console.log(file_url); 20 $('input[name=image_url]').val(file_url); 21 $('#img').attr({src:'http://'+file_url}) 22 } 23 }); 24 }; 25 </script> 26 </head> 27 <body> 28 <button id="upload-btn">上传文件</button> 29 <input type="text" id="image-input" name="image_url"> 30 <img src="" alt="" id="img"> 31 </body> 32 </html>
js实现图片上传并把url放入input框显示图片
1 window.onload = function () { 2 qiniu.setUp({ 3 'domain': 'qe667nnln.bkt.clouddn.com/', 4 'browse_btn': 'upload-btn', 5 'uptoken_url': '/uptoken/', 6 'success': function (up,file,info) { 7 var file_url = file.name; 8 console.log(file_url); 9 $('input[name=image_url]').val(file_url); 10 $('#img').attr({src:'http://'+file_url}) 11 } 12 }); 13 };