实现七牛图片上传

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)

View Code

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>

View Code

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  };

实现七牛图片上传

猜你喜欢