[关闭]
@skyway 2015-06-10T03:39:59.000000Z 字数 6788 阅读 1633

图床——基于七牛JS-SDK和KVDB

python kvdb 七牛 JS

原文链接：图床——基于七牛JS-SDK和KVDB

浏览

上传

服务端获取token

  1. # -*- coding: utf-8 -*-
  2. __author__ = 'Sky'
  4. import qiniu
  5. from datetime import datetime
  6. import config
  9. def get_token():
  10.     q = qiniu.Auth(config.QINIU_ACCESS_KEY, config.QINIU_SECRET_KEY)
  11.     # print str(datetime.now())
  12.     token = q.upload_token(config.PIC_BUCKET)
  13.     return token

JS上传到七牛

详细使用可参考七牛JS-SDK

  1. var uploader = Qiniu.uploader({
  2.     runtimes: 'html5,flash,html4',
  3.     browse_button: 'pickfiles',
  4.     container: 'container',
  5.     drop_element: 'container',
  6.     max_file_size: '100mb',
  7.     filters: {
  8.         mime_types: [
  9.             { title: "图片文件", extensions: "jpg,gif,png,bmp" }
  10.         ],
  11.         prevent_duplicates: true //不允许队列中存在重复文件
  12.     },
  13.     flash_swf_url: '/static/js/plupload/Moxie.swf',
  14.     dragdrop: true,
  15.     chunk_size: '4mb',
  16.     uptoken_url: $('#uptoken_url').val(),
  17.     domain: $('#domain').val(),
  18.     auto_start: true,
  19.     init: {
  20.         'FilesAdded': function(up, files) {
  21.             $('table').show();
  22.             $('#success').hide();
  23.             plupload.each(files, function(file) {
  24.                 var progress = new FileProgress(file, 'fsUploadProgress');
  25.                 progress.setStatus("等待...");
  26.             });
  27.         },
  28.         'BeforeUpload': function(up, file) {
  29.             var progress = new FileProgress(file, 'fsUploadProgress');
  30.             var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
  31.             if (up.runtime === 'html5' && chunk_size) {
  32.                 progress.setChunkProgess(chunk_size);
  33.             }
  34.         },
  35.         'UploadProgress': function(up, file) {
  36.             var progress = new FileProgress(file, 'fsUploadProgress');
  37.             var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
  38.             progress.setProgress(file.percent + "%", up.total.bytesPerSec, chunk_size);
  40.         },
  41.         'UploadComplete': function() {
  42.             $('#success').show();
  43.         },
  44.         'FileUploaded': function(up, file, info) {
  45.             var progress = new FileProgress(file, 'fsUploadProgress');
  46.             progress.setComplete(up, info);
  47.             var res = $.parseJSON(info);
  48.             // 请求后台存储
  49.             var domain = up.getOption('domain');
  50.             //url = domain + encodeURI(res.key);
  51.             var link = domain + res.key;
  52.             var key = res.key;
  53.             $.ajax({
  54.                 url:"/upQiniu",
  55.                 type: "POST",
  56.                 data: { key: key, url: link}
  57.             })
  58.             .done(function(data){
  59.                 if(data === 'error') {
  60.                     alert('上传失败');
  61.                     location.reload(true);
  62.                 }
  63.             });
  64.         },
  65.         'Error': function(up, err, errTip) {
  66.             $('table').show();
  67.             var progress = new FileProgress(err.file, 'fsUploadProgress');
  68.             progress.setError();
  69.             progress.setStatus(errTip);
  70.         }
  71.         ,
  72.         'Key': function(up, file) {
  73.             //当前时间戳
  74.             var key = new Date();
  75.             return key.getTime()
  76.         }
  77.     }
  78. });

保存信息到KVDB

  1. # -*- coding: utf-8 -*-
  2. __author__ = 'Sky'
  4. import sae
  5. import json
  6. import sae.kvdb
  8. class KvdbStorage():
  9.     # 初始化kvdb
  10.     def __init__(self):
  11.         self.kv = sae.kvdb.KVClient()
  13.     # 获取value
  14.     def get_value(self, key):
  15.         return self.kv.get(key)
  17.     # 获取dict_value
  18.     def get(self, key):
  19.         string_value = self.kv.get(key)
  20.         if string_value is None:
  21.             return None
  22.         return decode_dict(string_value)
  24.     # 设置value
  25.     def set_value(self, key, value):
  26.         self.kv.set(key, value)
  28.     # 设置dict_value
  29.     def set(self, key, dict_value):
  30.         string_value = encode_dict(dict_value)
  31.         self.kv.set(key, string_value)
  33.     # 批量获取key
  34.     def getkeys_by_prefix(self, prefix, limit=100, marker=None):
  35.         return list(self.kv.getkeys_by_prefix(prefix, limit=limit, marker=marker))
  37.     # 批量获取key/value
  38.     def get_by_prefix(self, prefix, limit=100, marker=None):
  39.         return self.kv.get_by_prefix(prefix, limit=limit, marker=marker)
  41.     # 删除key
  42.     def delete(self, key):
  43.         self.kv.delete(key)
  45. # 编码字典
  46. def encode_dict(my_dict):
  47.     return "\x1e".join("%s\x1f%s" % x for x in my_dict.iteritems())
  49. # 解码字典
  50. def decode_dict(my_string):
  51.     return dict(x.split("\x1f") for x in my_string.split("\x1e"))
  1. # 上传文件到七牛
  2. @app.route('/upQiniu', methods=['POST', 'GET'])
  3. def upQiniu():
  4.     if request.form.get('key'):
  5.         url = request.form.get('url')
  6.         upkey = request.form.get('key')
  7.         # 时间差，用于加载排序
  8.         import time
  9.         future_time = int(time.mktime(datetime.strptime('3000-01-01 00:00:00.000', "%Y-%m-%d %H:%M:%S.%f").timetuple()) * 1000)
  10.         uid = future_time - int(upkey)
  11.         # 存入DB
  12.         key = 'picbed_%s' % uid
  13.         object = 'Sunset Lake'
  14.         words = 'A peaceful sunset view...'
  15.         author = 'skyway'
  16.         # print key
  17.         data = {'upkey': upkey, 'object': object, 'words': words, 'author': author, 'url': url}
  18.         kv.set(str(key), data)
  19.         # kv.set_value(str(key), url)
  20.         return 'success'

浏览

访问获取key

  1. # 初始加载
  2. key_values = kv.get_by_prefix('picbed_', 20, None)
  3. # print sorted(kv.getkeys_by_prefix('picbed', 3, None))
  4. data = tuple(key_values)
  5. json_data = []
  6. for item in data:
  7.     tmp = {}
  8.     tmp['key'] = item[0]
  9.     if '\x1e' in item[1]:
  10.         content = decode_dict(item[1])
  11.         # print content
  12.         tmp['url'] = content['url'] + "?imageView2/2/w/400/format/jpg"
  13.         tmp['object'] = content['object']
  14.         tmp['words'] = content['words']
  15.         tmp['upkey'] = content['upkey']
  16.         tmp['author'] = content['author']
  17.     else:
  18.         tmp['url'] = item[1] + "?imageView2/2/w/400/format/jpg"
  19.         tmp['object'] = 'Sunset Lake'
  20.         tmp['words'] = 'A peaceful sunset view...'
  21.         tmp['upkey'] = item[1][-13:]
  22.         tmp['author'] = 'skyway'
  23.     json_data.append(tmp)
  24. # data = sorted(data, reverse=True)
  25. # print data
  26. return render_template('PicBed.html', data=json_data, domain=config.PIC_DOMAIN)

瀑布流和数据加载

  1. # 加载更多
  2. if request.form.get('key'):
  3.     key = request.form.get('key')
  4.     # print key
  5.     key_values = kv.get_by_prefix('picbed_', 10, key)
  6.     # print sorted(kv.getkeys_by_prefix('picbed', 3, key))
  7.     data = tuple(key_values)
  8.     # data = sorted(data, reverse=True)
  9.     print data
  10.     json_data = []
  11.     for item in data:
  12.         tmp = {}
  13.         tmp['key'] = item[0]
  14.         if '\x1e' in item[1]:
  15.             content = decode_dict(item[1])
  16.             # print content
  17.             tmp['url'] = content['url'] + "?imageView2/2/w/400/format/jpg"
  18.             tmp['object'] = content['object']
  19.             tmp['words'] = content['words']
  20.             tmp['upkey'] = content['upkey']
  21.             tmp['author'] = content['author']
  22.         else:
  23.             tmp['url'] = item[1] + "?imageView2/2/w/400/format/jpg"
  24.             tmp['object'] = 'Sunset Lake'
  25.             tmp['words'] = 'A peaceful sunset view...'
  26.             tmp['upkey'] = item[1][-13:]
  27.             tmp['author'] = 'skyway'
  28.         json_data.append(tmp)
  29.     json_str = json.dumps(json_data)
  30.     return json_str
  1. $(window).scroll(function () {
  2.     var clientHeight = $(window).height(),
  3.         scrollTop = $(window).scrollTop(),
  4.         scrollHeight = $(document).height();
  5.     if (!isScroll && (scrollHeight - clientHeight - scrollTop < 500)) {
  6.         isScroll = 1;
  7.         $('#loading').show();
  8.         // 获取最后一个块的key
  9.         var key = $('.grid:last-child').data('key');
  10.         // 请求数据
  11.         $.ajax({
  12.             url:"/picbed",
  13.             type: "POST",
  14.             data: { key: key}
  15.         })
  16.         .done(function(data){
  17.             if(data === 'error') {
  18.                 alert('加载失败');
  19.                 location.reload(true);
  20.                 return false;
  21.             }
  22.             var pics = JSON.parse(data);
  23.             //没有更多了
  24.             if(jQuery.isEmptyObject(pics)){
  25.                 $('#load_img').hide();
  26.                 $('#load_text').text('没有更多了！');
  27.                 $('#contain').BlocksIt('reload');
  28.                 return false;
  29.             }
  31.             $.each(pics, function(index, val){
  32.                 var add =
  33.                         "<div class='grid' data-key='" + this.key +"'>" +
  34.                             "<div class='imgholder'>" +
  35.                                 "<a class='fopLink' data-key='"+ this.upkey + "'>" +
  36.                                     "<img class='img_load' src='" + this.url +"' />" +
  37.                                 "</a>" +
  38.                             "</div>" +
  39.                             "<span class='stop'></span>" +
  40.                             "<strong>"+ this.object +"</strong>" +
  41.                             "<div class='description'>" +
  42.                                 "<p>"+ this.words +"</p>" +
  43.                                 "<div class='meta'>by " + this.author +"</div>" +
  44.                             "</div>"+
  45.                         "</div>";
  46.                 $("#contain").append(add);
  47.                 // 动态加载渲染图片
  48.                 img_stop();
  49.             });
  50.             $('#contain').BlocksIt('reload');
  51.         });
  52.     }
  53. });

长图渲染

对于过长的图片，影响整个浏览的体验，于是超过一定长度的图片，超出部分隐藏，并在图片尾部添加波浪表示图片未展示完全。

  1. // 渲染图片函数
  2. var img_stop = function(){
  3.     var height = 800;
  4.     $('.img_load').each(function() {
  5.         $(this).load(function(){
  6.             if( $(this).height() > height){
  7.                 $(this).parent().parent().next().css('display', 'block');
  8.             }
  9.         });
  10.     });
  11. };
  13. // 初始加载渲染图片
  14. $(function(){
  15.     img_stop();
  16. });
  18. var img_load = function(url, key) {
  19.     var img = new Image();
  20.     img.src = url;
  21.     img.onload = load_img(img, key);
  22.     function load_img(img, key){
  23.         var height = img.height;
  24.         if( height > 500){
  25.             var str = 'div[data-key=' + key + ']';
  26.             $(str).find('.stop').css('display', 'block');
  27.         }
  28.     }
  29. };

效果

GitHub源码

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注