在 vim 中上传图片到图床

vim 是我最常用的编辑器， 经常用它来写 Markdown 格式的博客， 既然是写博客肯定少不了图片，我使用 SM 作为图床保存我博客中的图片。其实有很多图床上传工具，但是我不喜欢在写博客的时候来回切换界面，这样容易打断思路。所以就写了一个插件直接在 vim 中上传本地图片到图床中，并自动插入外链。

先看一个演示：

Peek 2019-02-28 09-05.gif

下面开始详细说明如何编写该工具

接入 SM 的 API

在 SM 首页可以找到它提供的一些 API，这里我只需要用到上传API即可
在 /usr/local/bin/ 下新建文件 sm_picture

#! /usr/bin/ruby
require "json"
re = `curl -s -X POST -F 'smfile=@#{ARGV[0]}'  https://sm.ms/api/upload`
puts JSON.parse(re)['data']['url'] + "?filename=#{ARGV[0].split("/").last}"

上传 API 的 url 是 https://sm.ms/api/upload ，以 POST 方式提交，需要一个本地文件名作为参数，直接使用 Linux 中自带的 curl 命令即可，然后获取到返回结果中的图片链接。

然后 sudo chmod +x ./sm_picture 赋予执行权限

脚本写好以后可以在终端测试一下是否能够正确运行

编写 vim 插件

1. 进入 ~/.vim/plugged/ 目录下，新建文件夹 custom_script/autoload 和 custom_script/plugin， autoload 下的 vim 脚本会自动加载，plugin 下的脚本则是用来配置一些快捷键等操作。

2. 在 custom_script/autoload 下新建 sm_picture.vim 文件，打开该文件，编写下面代码

function! sm_picture#get_picture_url()
ruby << EOF
class SM
  def initialize
    @buffer = Vim::Buffer.current
  end

  def get_current_line
    s = @buffer.line       # gets the current line
    name = s.split("/").last
    real_link = `sm_picture #{s}`
    real_link = real_link.split(/\n/).last
    Vim::Buffer.current.line = "![#{name}](#{real_link})"     # sets the current line number
  end
end
gem = SM.new
gem.get_current_line
EOF
endfunction

因为 ruby 处理字符串比较方便，就使用 vim 给 ruby 提供的接口来进行相关处理， 首先获取当前行的内容，然后调用刚刚编写的上传图片脚本，最后把脚本返回值插入到当前行。

在 vim 中 执行 :h ruby 可以查看 vim 提供给 ruby 的接口。

配置快捷键

在 custom_script/plugin 下新建 script_config.vim 文件，变下下面代码

noremap sm :cal sm_picture#get_picture_url()

依次按下 s m 就会触发这个脚本。

后记

可以按照如上的方式编写自己的 vim 插件， 然后放到自己 github 中， 在 .vimrc 中 添加 Plug 'custom_script' ，以后就可以使用 :PlugInstall 来安装你的插件了。 因为我使用的是 Plug 插件管理工具，可以用 :PlugInstall 安装插件。其他的插件管理工具则使用对应的安装方法。