如何优雅的将图片上传到自己的图床【Markdown利器】

技术开发

动机

有很长一段时间没有去认真的更新博客主要是自己的博客更新步骤感觉太繁琐了。每次新发博文用到图片都需要打开七牛云-登录-上传-获取外链，真的是好烦啊！有没有什么简单的方法，能够优雅快速的上传图片，并拿到它的Markdown图片链接呢🤨？

初步构想

最初为了实现我的想法，我第一反应就简化七牛本身的流程，制作一个直接上传-拿链接的简单Web图床。可之后感觉是方便了一点但不大，喜欢这种Web图床的可以参考文末的链接。之后，我也尝试过VScode中的图片上传插件vs-picgo等。但用下来感觉并不是很舒服，而且还会有一些莫名其妙的Bug。
最后我找到了PicUploader一个还不错的图床工具，支持Mac/Win/Linux服务器。功能挺多的，但是其中我最看重的是在本地右键图片直接上传粘贴的操作，妙啊🐱。

行动

1.拥有一个七牛云的账号（ps.配合七牛使用要有自己在备案的域名，如果没有可以尝试找好友白嫖一个🤔。要是实在没有，那你只能放弃七牛云，考虑下其他图床吧）
然后，把接入PicUploader的参数记录下来。

  • AppKey、AppSecret：这两个是一对，就好像账号与密码一样；
    在七牛云控制台中，右上角头像👉密匙管理

    在这就能得到AppKey和AppSecret
  • bucket：就是你对象存储的存储空间名称；
    选择控制台左边的对象存储👉空间管理
  • domain：外链域名
    点击空间管理操作下的文件

2.安装PHP环境
如果你已经有其他PHP环境了，那么你可以直接跳过这一步。我这安装的是phpstudy,直接进入官网选择对应的版本下载安装就行了。

3.配置Web管理页面

  • 使用git下载PicUploader
    当然要是用git下载的前提肯定是你要有安装，🤦‍不过要是你真没安装可以先看下教程安装。到你php环境的WWW目录下（一般来说就在你PHP的安装目录）鼠标右键，点击Git Bash here。

    在启动的窗口中，执行以下命令：

    1
    git clone https://github.com/xiebruce/PicUploader.git

    下载完成（可能有点慢耐心等待）：

  • 更新PicUploader
    同样的方法执行命令：

    1
    git pull

  • 配置Nginx
    进入phpstudy安装目录下phpstudy_pro\Extensions\Nginx1.15.11\conf\vhosts文件夹，在里面新建一个叫api.picuploader.com.conf的配置文件，然后把下面的配置复制进去：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    server {
    listen 80;
    server_name api.picuploader.com;

    client_header_timeout 60s;
    client_body_timeout 60s;
    send_timeout 60s;
    keepalive_timeout  65s;
    client_max_body_size 100m;

    access_log logs/api.picuploader.com.error.log combined;
    error_log logs/api.picuploader.com.error.log error;

    root D:\InstallHome\phpstudy_pro\WWW\PicUploader;

    location / {
        index dashboard.php;
        try_files $uri $uri/ index.php$is_args$args;
    }

    location ~ \.php$ {
        fastcgi_pass 127.0.0.1:9000;
        fastcgi_index index.php;
        include fastcgi.conf;
    }
    }

    🍭注意其中的root D:\InstallHome\phpstudy_pro\WWW\PicUploader;这里是PicUploader的路径，把它改成你自己的。然后打开phpstudy的设置👉配置文件👉hosts

    在弹出的文件最后加上如下代码后保存：

    1
    127.0.0.1 api.picuploader.com

    最后点击phpstudy的首页👉Nginx启动

    如果到这没有报错的话，你就可以在浏览器中输入api.picuploader.com打开图床的配置界面进行愉快的配置了。

  • PicUploader的参数配置
    在PicUploader的Web页面中选择设置云存储服务器参数👉七牛云👉将对应的参数填入

    选择通用设置👉勾选存储引擎

4.添加右键菜单
进入phpstudy_pro\WWW\PicUploader\accessorys文件夹下找到add-right-click-menu.bat鼠标右键以管理员身份运行，如果你出现了乱码，那么选择add-right-click-menu-utf8.bat就可以了。然后将如何下信息不全完整：

1
2
3
4
5
6
# php.exe的路径
D:\phpstudy_pro\Extensions\php\php7.3.4nts\php.exe
# index.php的路径
D:\phpstudy_pro\WWW\PicUploader\index.php
# 右键菜单文字
这个你随意取

☠注意，路径一定要换成你自己的啊！最后y确认安装完成。现在你就可以在本地选中图片后，右键直接上传、获取Markdown链接进行愉快的粘贴了👌。

5.使用快捷键上传
这是右键上传的进阶操作。首先需要我们先安装一个快捷键助手Winhotkey。下载安装完成后开始设置一个你自己的快捷键
点击New Hotkey👉选择你想设置的快捷键和PicUploader的启动路径

等待到这先别急着点OK,点击Advanced

  • 第一个也是php.exe的路径
  • 第二个填个固定值
    1
    index.php --type=alfred
  • 第三个填PicUploader的路径
  • 最后一个固定选Minimized

    这个时候就可以点击OK完成了！试试直接截图，后按下快捷键上传的感觉把👍。

参考