【效率】七牛云+dropzone 搭建博客图床

话不多说先上一波效果：

演示

我这篇博客的应用场景是，你是一个markdown重度应用患者。喜欢折腾，但是每次在写自己的博客，碰到了自己需要上传原创图片链接时，往往都没有一个好的处理方式。

不过看了我的演示，你可以发现，当我遇到这种场景时，我给出的方案是：

我只需要拖住我的图片。丢到上面的那个框里，然后等一下，图片自动上传七牛返回外链自动推送到剪贴板。一气呵成。我只需要在需要的地方按一下粘贴cmd + v 图片就OK了。

下面说一下需要准备的原材料：

1. Dropzone 3：一款效率软件，AppStore售价68，官网售价10$。

2. 七牛云：一个云服务提供商。每个月有10g免费流量。对于正常博客来讲完全够用。

3. 以及一颗折腾的心❤️

本文环境为macOS 10.12.14

搭建流程

1.Dropzone的配置：

首先去官网或者AppStore下载安装。

这里有个坑，在AppStore购买安装的，需要在安装成后去官网在下载一个安装包替换掉本地的应用程序。否则无法安装自定义Action。

安装成功后下载一个自定义Action

这里要感谢闫肃大神的插件编写。

不过我遇到了一些问题。我们下面会提到。

2.注册一个七牛云的账户。并创建一个公开的存储空间。在这里需要记下bucketName，AccessKey，SecretKey。

1

2

3

3.配置dropzone的QiqiuAction

这里其实详细的配置方法在闫肃大神的这篇博客上已经给出了：

使用Dropzone和七牛优化博客图床

配置参数对应信息

然而我遇到了一些问题并没有配置成功。

所以我给出了我的解决方法。
首先更新了最新的Qiniu的Python的SDK。

SDK下载地址

替换完成后，打开action.py，用文本编辑器即可。

下面我会在文后贴出我更改的源码，直接替换打开的这个文件中的源码，然后将改修改的配置信息对应填写。就OK了。

PS：
源码我做了一些更改，因为某些情况下我们的图片大小并不适合我们的博客展示，并且可能截图图片的质量太高浪费流量，所以我选择了使用七牛的异步转码，在服务端进行图片切割并压缩。方法如下：

在此首先需要你在七牛上创建自己的私人队列：

然后在你的存储空间中添加新图片裁剪样式：

博主的样式为：

imageView2/2/w/600/h/600/q/75|imageslim

七牛在这里做了图形化的创建方式优化，创建样式确实很方便，点赞。

当然你也可以选择手动在jpg网址后面拼接图片裁剪的大小例如
http://orsg2lmcy.bkt.clouddn.com/wc-erhai-1.jpg?imageView2/2/w/200/q/95
可以打开连接自己换换参数测试一下

具体参数可查看文档

到此配置基本完成。接下来就可以像文章开头一样进行图片上传了。

总结

作为一个程序猿，保持一个折腾的❤️才是最重要的。之前鼓捣博客，为了应付直接把GitHub当图床用了。后来发现限制好多，而且上传，获取外链，麻烦的要死。不过经过这一番折腾，总算是有一个自己的便利方案。开发使用效率工具的过程，虽然看起来用了很长时间，但当你折腾成功之后，那种顺畅丝滑的感觉，是无法比拟的。

希望在程序之路上永远保持一个折腾的心。你我共勉。

本文在很多细节上可能并不尽如人意，如果有问题，可以发我邮件：

[email protected]

博主私人博客@HarwordLiu

源码

# Dropzone Action Info
# Name: QiniuDIY
# Description: Upload images to qiniu.com
# Handles: Files
# Creator: HarwordLiu
# URL: https://harwordliu.com
# OptionsNIB: ExtendedLogin
# Events: Clicked, Dragged
# KeyModifiers: Command, Option, Control, Shift
# SkipConfig: No
# RunsSandboxed: No
# Version: 1.3
# MinDropzoneVersion: 3.5

import os
import sys
import commands
import shutil
import uuid
import imghdr
import webbrowser
from qiniu import Auth, PersistentFop, build_op, op_save, urlsafe_base64_encode, put_file, etag, BucketManager
import qiniu.config


reload(sys)
sys.setdefaultencoding('utf8')
bucket_name = '------------your_bucketName-----------------'
query = None
def getAuth():
    global query
    if query != None:
        return query
    access_key = os.environ['username']
    secret_key = os.environ['password']
    query = Auth(access_key, secret_key)
    return query

def isFileExist(file_name):
    q = getAuth()
    # check if file already exist
#    bucket_name = os.environ['server']
    bucket = BucketManager(getAuth())
    ret, info = bucket.stat(bucket_name, file_name)
    if ret != None:
        return True
    else:
        return False

def uploadFile(file_path, file_name):
    q = getAuth()
#    bucket_name = os.environ['server']
    dz.url(bucket_name)
    if isFileExist(file_name):
        dz.fail("Filename already exist")

    pipeline = '----------your_pip----------'
    fops = 'imageView2/2/w/600/h/600/q/75|imageslim'
    fop_name = '%s:%s/600' % (bucket_name, file_name)
    saveas_key = urlsafe_base64_encode(fop_name)
    fops = fops+'|saveas/'+saveas_key
    policy = {
        'persistentOps':fops,
        'persistentPipeline':pipeline
    }

    token = q.upload_token(bucket_name, file_name, 3600, policy)
    ret, info = put_file(token, file_name, file_path)

    if info.status_code == 200:
        bucket_domain = os.environ.get('root_url', '')
        base_url = 'http://%s/%s/600' % (bucket_domain, file_name)

        # copy file to local path as backup
        if 'remote_path' in os.environ:
            dest_path = '%s/%s/600' % (os.environ['remote_path'], file_name)
            shutil.copyfile(file_path, dest_path)

        return base_url
    else:
        return False

def dragged():
    dz.begin("Starting uploading...")
    dz.determinate(True)
    dz.percent(10)

    # keep origin name
    file_path = items[0]
    file_name = os.path.basename(file_path)
    base_url  = uploadFile(file_path, file_name)

    if base_url:
        dz.finish("Upload Completed")
        dz.percent(100)
        dz.url(base_url)
    else:
        dz.fail("Upload Failed")
        dz.percent(100)
        dz.url(False)

def clicked():
    dz.percent(10)

    file_path = dz.temp_folder() + '/qiniu_img_cache'
    current_path = os.path.dirname(os.path.realpath(__file__))
    command = '"%s/pngpaste" "%s"' % (current_path, file_path)
    status, output = commands.getstatusoutput(command)
    if (status != 0):
        web_url = 'https://portal.qiniu.com/bucket/%s/index' % (bucket_name)
        webbrowser.open(web_url)
        dz.fail(output)

    inputs = dz.cocoa_dialog('standard-inputbox --title "Filename Required" --e --informative-text "Enter filename without suffix:"')
    inputs = inputs.split("\n")
    if not inputs[1]:
        file_name = str(uuid.uuid4())
    else:
        file_name = inputs[1]

    file_name = file_name + '.' + imghdr.what(file_path)

    while True:
        if isFileExist(file_name):
            file_name = dz.inputbox("Filename already exist", "Enter filename without suffix:")
            file_name = file_name + '.' + imghdr.what(file_path)
        else:
            break

    dest_path = '%s/%s' % (os.path.dirname(file_path), file_name)
    shutil.move(file_path, dest_path)

    dz.begin("Starting uploading...")
    dz.determinate(True)

    base_url = uploadFile(dest_path, file_name)
    if (base_url):
        dz.finish("Upload Completed")
        dz.percent(100)
        dz.url(base_url)
    else:
        dz.fail("Upload Failed")
        dz.percent(100)
        dz.url(False)