欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

七牛+Automator构建简单快捷的文件上传系统

程序员文章站 2022-04-07 17:22:27
...

问题来由

自从决定用Markdown写教程和技术文档,就很快遇到了插入图片的问题,因为Markdown需要用图片链接的方式展示图片,所以就研究了一下如何将本地图片上传到xx云,然后再获取图片的访问链接。

最后参照两篇文章解决了这个问题,而且方法简单优雅。以下是两篇文章的链接:

利用七牛 qshell 和 Automator 打造快捷上传服务

自制永久免费的私有图床,替代iPic,你值得拥有

这篇是学习了两篇文章并自己实现后按照我自己的理解做的一个梳理与总结,感谢以上两篇文章作者!

所需资源

  1. 该解决方案针对MacOS平台。其他平台肯定也能实现,只是需要另做研究,后面可能会研究Windows平台下的实现方式。
  2. 注册一个七牛云的个人账户。
  3. 最好能购买并备案一个域名,前期可以使用七牛的测试域名。

实现过程

一、七牛云相关的准备工作
  1. 注册一个七牛云个人账户并完成实名认证,你会获得一定大小的免费存储空间。
  2. 进入产品主页,在左侧菜单栏点击【对象存储】,然后选择【空间管理】,再点击【新建空间】。七牛+Automator构建简单快捷的文件上传系统

然后按照要求创建空间。空间名称最好写个有意义的名字,这个后面会用到,访问控制如果没有特别需要就选公开就行。

  1. 获取七牛分配的CDN测试域名。在左侧菜单栏点击【CDN】,然后选择【域名管理】。这个域名后面也要用到。

    七牛+Automator构建简单快捷的文件上传系统

  2. 在【个人中心】> 【**管理中】找到自己的一对**,Access/SecretKey,后面会用到。

  3. 在七牛云开发者中心下载命令行工具(qshell)。qshell下载

下载后可按官方文档的设置方法进行配置。我是按照上面作者的方法配置的,方法如下:

$ mv ~/Downloads/qshell /usr/local/bin
$ chmod 755 /usr/local/bin/qshell
$ qshell account accessKey secretKey name

以上三条命令分别是先移动下载好的qshell到bin文件夹,然后给予文件权限,最后鉴权。最后一条命令的accessKey secretKey就是步骤4中得到的一对**,name是七牛云账号名称,这在官方文档里都有说明。

二、Automator部分
  1. 打开Automator选择【快速操作】
    七牛+Automator构建简单快捷的文件上传系统

  2. 找到【运行Shell脚本】拖到右侧区域,按图示红框里的选择即可。七牛+Automator构建简单快捷的文件上传系统

  3. 重点来了!原文作者的完整Shell脚本代码,如下:

local length="${#1}"
  for (( i = 0; i < length; i++ )); do
    local c="${1:i:1}"
    case $c in
      [a-zA-Z0-9.~_-]) printf "$c" ;;
    *) printf "$c" | xxd -p -c1 | while read x;do printf "%%%s" "$x";done
  esac
done
}
for f in "aaa@qq.com"
do
    if [ -f $f ]; then
        Key=$(date +%F)-$(date +%s | md5 | head -c 8)-$(basename $f)
        /usr/local/bin/qshell fput static "$Key" $f
        link="//static.domain.me/$(urlencode $Key)"
        if [ "$links" == "" ]; then
            links=$link
        else
            links=$links"\n"$link
        fi
    fi
done
echo -ne $links | pbcopy

原作对这段代码的解释也写到这里:

  • 这里主要是对 Key 的构造,即上传文件在七牛存储中的文件名,我选择的构造规则是*[日期]-[时间戳MD5值]-[文件名]*,可以有效规避文件名重复的问题;
  • pbcopy 命令会把 echo 中的内容放置到系统粘贴板中;
  • 关于 urlencode :在上传测试过程中,发现一旦选择的文件列表中含有中文命名的文件,就会导致文件链接构造异常,最后也到不了系统粘贴板中,具体原因不明,所以在构造链接时做一次编码就好,反正浏览器本身也会对编码的链接自行识别;
  • if [ -f $f ] 是为了判断文件与文件夹;
  • 考虑到MD5值太长,我只截取了8位;
  • 请把资源链接的域名改成你对应的。

我需要补充的一点就是

/usr/local/bin/qshell fput static "$Key" $f

这一句中的 static 就是上面说的七牛云部分里面 对象存储 > 新建空间 里面创建的空间的名称,需要将其替换成你的空间名称。

link="//static.domain.me/$(urlencode $Key)"

另外就是一定要记得把上面这句中的域名换成自己的,也是上面七牛云部分说的 七牛分配的CDN测试域名。

准备好脚本后复制粘贴到上面的区域即可,传递输入选择【作为自变量】,如下图。
七牛+Automator构建简单快捷的文件上传系统

  1. 文章二作者对代码进行了改造。因为主要是在写Markdown时用到图片,所以将上传后的链接直接就写成Markdown格式的,这样可以直接粘贴到Markdown编辑器中。需要修改两行脚本:

a.链接添加 http:// 或者https://

link="//static.domain.me/$(urlencode $Key)" 

​ 修改成

link="http://static.domain.me/$(urlencode $Key)" 

​ b.剪贴板链接修改成Markdown格式

echo -ne $links | pbcopy

​ 修改成

 echo -ne "![]($links)" | pbcopy
  1. 文章二作者通过Apple Script脚本实现一个比较优雅的运行完成后的通知,设置方法是在Automator中添加一个 “运行AppleScript” , 内容如下:
  display notification "Markdown链接已自动复制" with title "图片上传成功" sound name "default"

其中标题、内容、声音都可以自己定制。
七牛+Automator构建简单快捷的文件上传系统

  1. 以上一切就绪之后,保存这个Automator服务,给它起个名字,比如我的叫【上传至七牛】,然后就可以愉快地使用了。文章二还写了给这个服务创建一个快捷键,这里就不写了,参照作者原文即可。

最后效果

七牛+Automator构建简单快捷的文件上传系统

存在的问题

七牛提供的测试域名1个月就失效了,解决办法如下:

首先自己购买并备案一个域名,然后找到原始的Markdown 文件,用下面的命令对文件做个替换即可(new.bkt.clouddn域名需要按照实际进行替换)

 sed -i "s#//.*bkt.clouddn#//new.bkt.clouddn#g" file.md
相关标签: 教程