Total Pageviews

Friday, 25 September 2026

PicUploader

 一个还不错的图床工具,支持Mac/Win/Linux服务器、支持压缩后上传、添加图片或文字水印、多文件同时上传、同时上传到多个云、右击任意文件上传、快捷键上传剪贴板截图、Web版上传、支持作为Mweb/Typora发布图片接口、作为PicGo/ShareX/uPic等的自定义图床,支持在服务器上部署作为图床接口,支持上传任意格式文件。

 https://www.xiebruce.top/17.html

PicUploader 是一个用php编写的图床工具,它能帮助你快速上传你的图片到云图床,并自动返回Markdown格式链接到剪贴板。配置完成后,要获取一个可用于markdown的图片外链只需要:

  • 方式一: 右击电脑本地任意格式文件→点击你的自定义上传菜单→系统通知文件上传成功→到Markdown编辑器中粘贴!
  • 方式二: 截图并点击复制到剪贴板→按快捷键→系统通知图片上传成功→到Markdown编辑器中粘贴!
  • 方式三: 右击网页中的图片→点击复制图片→按上传快捷键→系统弹出上传成功通知→到Markdown编辑器中粘贴!
  • 方式四: 使用网页版上传,包括拖放上传(支持多文件)、复制本地图片文件后粘贴上传、截图后粘贴上传、复制网页上的图片后粘贴上传、点击上传按钮选择图片后上传(支持多文件)。

主要功能

  • 支持Mac和Windows(也可用于Linux服务器端)、理论上也支持Linux桌面版,只要你能添加右键菜单或者用快捷键调用上传命令的话;
  • 支持图片压缩后上传(支持jpg/png/webp,gif/bmp不支持压缩);
  • 支持添加水印后上传(支持文字水印、图片水印、自定义水印颜色/透明度/角度/位置,支持jpg/png/bmp/webp,gif不支持水印);
  • 返回的链接可自定义(如原始链接、Markdown格式链接、可点击的Markdown格式链接、完全自定义的链接);
  • 完全自定义上传文件名(可选变量有当前年、月、日、当前时间戳,随机字符串(可调长度));
  • 上传过的文件直接返回历史记录(防止重复上传,仅限在不添加水印不压缩的情况下);
  • 可作为MWeb/Typora的API使用,可作为PicGo/ShareX/uPic等的自定义图床使用;
  • 支持快捷键上传剪贴板中的图片(配合Alfred/WinHotKey使用);
  • 支持Web端拖放、粘贴、或直接选择上传图片;
  • 支持Web端设置所有参数;
  • 支持上传任意格式文件(除了图片,还可以上传任意格式文件,只要你的存储端支持就行);
  • 目前支持的图床:七牛、腾讯、网易、百度、京东、阿里、又拍、sm.ms、Imgur、Ucloud、青云、Nextcloud、Github、Gitee(码云)、Cloudinary、Chevereto、Minio、Aws s3、金山、华为、DropBox、OneDrive、GoogleDrive、Azure、Gitlab、图速云、个人服务器(sftp)、本地(即PicUploader所在机器)。
  • 注:之前支持的coding.net由于封了token方式授权的接口,所以现在暂时不支持coding.net。

 

获取各图床的参数

参见:PicUploader: 各图床获取上传图片参数的方法。

在Mac上配置

本文档为纯文字文档,如有不懂的,请看详细文档:PicUploader: 一个还不错的图床工具(如果网站进不去,先试试用手机流量能不能进,能的话就是你所在地或者所用的那个网络运营商网络对我网站所使用的cdn不通,但一般过几天或者一周两周,又会自动可以,在这之前暂时只能使用代理工具加个pac进去了)。

下载

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

更新

如果以后要更新,请直接从git更新即可:

git pull

填写配置

配置文件方式 把PicUploader/config/config.php文件复制一份,命名为config-local.php,然后在config-local.php中填写配置。

Web方式 直接修改配置虽然可以修改配置,但最好还是配置好下边的web后台,在web页面上修改配置,有界面更方便。

在Mac上搭建web后台

请搭建php+nginx运行环境,以下是nginx配置:

server {
    listen 443 ssl;
    server_name api.picuploader.com;

    client_header_timeout 60s;
    client_body_timeout 60s;
    send_timeout 60s;
    keepalive_timeout  65s;

    access_log /usr/local/var/log/nginx/api.picuploader.com.access.log combined;
    error_log /usr/local/var/log/nginx/api.picuploader.com.error.log error;

    root /Users/bruce/www/personal/PicUploader;

    #https start
    ssl_certificate /Users/bruce/www/personal/PicUploader/accessorys/mkcert/api.picuploader.com.pem;
    ssl_certificate_key /Users/bruce/www/personal/PicUploader/accessorys/mkcert/api.picuploader.com-key.pem;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHellA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
    add_header Strict-Transport-Security "max-age=63072000; includeSubdomains; preload";
    #https end

    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;
    }
}

其中ssl_certificate和ssl_certificate_key是证书和证书密钥文件,生成方式请查看:使用mkcert配置本地https。

由于是本地随意写的域名,所以需要在/etc/hosts中指定一下这是本地域名:

127.0.0.1 api.picuploader.com

如果一切正常,访问https://api.picuploader.com就能看到PicUploader后台了,然后你就可以在里面添加配置和上传文件了。

添加右键上传

在Mac启动台中的“实用工具(Utility)”里找到“自动操作(Automator)”,打开它,创建一个服务,输入“shell”搜索→搜索出“运行Shell脚本”→把它拖到右侧:

  • 工作流程收到当前:文件或文件夹 位于访达.app
  • 输入为:灰色不可选,也不需要选
  • 图像:默认就行
  • 颜色:默认就行

运行Shell脚本:

  • Shell: /bin/bash
  • 传递输入: 作为自变量
  • 命令(注意把这里的路径改成你电脑上的路径):
export LC_CTYPE="zh_CN.UTF-8"
/usr/bin/php /path/to/PicUploader/index.php "$@" | pbcopy

最后cmd+s保存→命名成Upload with PicUploader就完成了,可以关掉“自动操作”app了,然去Finder随便右击一个文件,是不是有个菜单叫Upload with PicUploader? 点击它就可以上传该文件了。

快捷键上传

安装pngpaste(很小,只有40k左右)

brew install pngpaste

安装Alfred,双击PicUploader/accessorys/PicUploaderHelper/PicUploaderHelper.alfredworkflow→导入。

导入后可看到三个图标:

  • 双击第一个HotKey图标可设置快捷键;
  • 双击第二个Run Script图标设置快捷键要运行的命令,Language选择/bin/bash→with input argv→Sequentially,script填写(注意路径要换成你自己的):
/usr/local/bin/php /path/to/personal/PicUploader/index.php --type=alfred
  • 双击第三个clipboard图标,type选择Plain Text,框里填{query},并勾选“Automatically paste to front most app”。

使用: 把鼠标光标置于任意编辑器界面上,截图→复制到剪贴板→按快捷键→右上角提示上传中→右上角提示上传完成(此时返回的链接已经自动粘贴到编辑器中)!

作为MWeb图片上传接口

Mweb→Preferences(偏好设置)→Publishing(发布)→Custom(自定义):

  • name: PicUploader
  • API URL: http:api.picuploader.com/index.php
  • POST File Name: mweb
  • Response URL Path: data/url

如果你是远程部署的,一定要Nginx添加密码认证,添加了认证,MWeb这里就需要添加一个Header,名称为authorization,值为Basic xxxxxxx,其中xxxxxxx这串值,需要你登录网页版后,在网页控制台→网络→找到任意一个链接→查看它的Request Headers,找到authorization就有这串值。

使用: 截图粘贴到MWeb(或直接拖动图片到MWeb)→点击顶部菜单栏中的Publish→Upload Local Images To...→Copy Markdown即可自动上传图片,等所有图片上传完成,会显示Copied,然后你可以cmd+a全选文章cmd+v粘贴覆盖掉原文,这时整篇文章中的图片都换成了线上链接了。

作为Typora图片上传接口

作为Typora图片上传接口时,必须把PicUploader安装在本地,因为Typora本身不支持上传到api。


Typora→偏好设置→图像→上传服务选Custom Command,自定义命令填(注意把路径换成你电脑上的路径):

/usr/local/bin/php /path/to/PicUploader/index.php --type=typora

使用: 截图粘贴(或拖动图片)到Typora→Typora自动显示出上传图片菜单(没有显示就右击图片)→点击上传图片,稍等片刻,如果图片上传正常,则图片会自动被替换为返回的图片地址。

作为PicGo自定义图床

右击顶部PicGo图标→打开详细窗口→插件设置→搜索web-uploader→点击安装,安装好后就能在左侧图床列表看到自定义图床。

点击自定义图床并填写配置:

  • url: http://你的PicUploader后台域名/index.php
  • paramName: picgo
  • jsonPath: data.url
  • customHeader: 如果nginx使用了Nginx添加密码认证,则填{"authorization":"Basic xxxxxxx"},否则留空,其中xxxxxxx如何获取请参考作为MWeb图片上传接口
  • customBody: 暂时用不到,留空。

设置好之后,双击顶部工具栏PicGo图标→选择默认图床→自定义Web图床,然后使用PicGo上传图片就会自动通过PicUploader的接口上传了。

作为uPic的自定义图床

uPic→Preferences→Host→左下角+号→Custom:

  • API URL: http://你的PicUploader后台域名/index.php;
  • Method: POST;
  • File Field: upic;
  • URL Path: ["data", "url"];
  • Domain: 不用填,留空。

如果nginx使用了Nginx添加密码认证,则需要添加Header,点击Other Fields→Add Header Field:

查看日志和历史记录

在PicUploader/logs/文件夹下有上传日志和错误日志。

在Web版中点击左侧栏“逆时针旋转图标”的按钮即可查看上传历史,其中Sm.ms和Imgur由于可匿名上传,所以提供了删除功能。

在Windows上配置

本文档为纯文字文档,如有不懂的,请看详细文档:在Windows上使用PicUploader。

在Windows上搭建Web后台

安装phpstudy,按以下方法配置。

进入D:\phpstudy_pro\Extensions\Nginx1.15.11\conf\vhosts文件夹,在里面新建一个文件名为api.picuploader.com.conf的配置文件,然后把以下配置粘贴进去:

server {
    listen 443 ssl;
    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:/phpstudy_pro/WWW/PicUploader;

    #https start
    ssl_certificate D:/phpstudy_pro/WWW/PicUploader/accessorys/mkcert/api.picuploader.com.pem;
    ssl_certificate_key D:/phpstudy_pro/WWW/PicUploader/accessorys/mkcert/api.picuploader.com-key.pem;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHellA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
    add_header Strict-Transport-Security "max-age=86400; includeSubdomains; preload";
    #https end

    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;
    }
}

ssl_certificate和ssl_certificate_key是https证书和密钥文件,生成这两个文件请查看:使用mkcert配置本地https)。

添加hosts文件指向(点击phpstudy的设置→配置文件→hosst会自动用记事本打开):

127.0.0.1 api.picuploader.com

启动phpstudy的nginx,如果一切正常,你应该可以在浏览器打开:

api.picuploader.com

添加右键菜单

右击PicUploader/accessorys/add-right-click-menu.bat→以管理员身份运行→按提示填写最后输入y回车安装(注意复制路径如果开头有乱码字符请删掉)。

使用: 右击文件→点击自定义上传菜单→自动弹出黑框→黑框消失表示上传完成→去粘贴。


删除右键菜单: Win+R,输入regedit回车,进入注册表编辑器,找到HKEY_CLASSES_ROOT→*→shell,在这里就能找到你添加的菜单,删掉它,再重新按前面的步骤添加即可。

快捷键上传

下载WinHotKey,打开WinHotKey→New Hotkey...:

  • When I press these keys: 勾选Alt和Ctrl
  • Along with the key: U,这一步跟前一步加起来表示把快捷键设置为Ctrl+Alt+U
  • 点击右下角的Advanced...
  • Launch which application: D:\phpstudy_pro\Extensions\php\php7.3.4nts\php.exe
  • Provide application parameters here: 固定填index.php --type=alfred
  • Start the application at this folder: D:\phpstudy_pro\WWW\PicUploader
  • Display the window: Minimized

记得所有路径都换成你电脑的路径,然后保存,因为我们没有勾选Windows键,所以保存时它会弹出个提示(不用看,点Yes就行)。

使用: 截图→复制到剪贴板→按快捷键→任务栏显示php图标(上传中)→任务栏图标消失(上传完成)→去粘贴。

注意: 如果是Win7,需要升级Windows Management Framework 5.1,请下载安装。

作为Typora上传图片接口

参见:作为Typora图片上传接口。

作为PicGo自定义图床

参见:作为PicGo自定义图床。

作为ShareX的自定义图床

这个有点复杂,文字可能说不太清,直接看详细文档吧:作为ShareX的自定义图床。

查看日志和历史记录

在PicUploader/logs/文件夹下有上传日志和错误日志。

在Web版中点击左侧栏“逆时针旋转图标”的按钮即可查看上传历史,其中Sm.ms和Imgur由于可匿名上传,所以提供了删除功能。

在服务器上搭建

服务器上搭建也是搭建一个php+nginx运行环境,nginx配置文件直接用在Mac上搭建web后台的就行,只不过路径要改改罢了,另外服务器上获取https证书要使用真实证书,申请https证书请查看:https证书自动续订(renew)问题。

注意: 由于PicUploader没有账号系统,在服务器上搭建,需要在nginx添加认证密码,添加方法请查看:Nginx添加密码认证。

from  https://github.com/xiebruce/PicUploader

--------------------------------------------------------------

 

简介

上传方式

PicUploader是一个用php编写的图床工具,它能帮助你快速上传你的图片到云图床,并自动返回Markdown格式链接到剪贴板。配置完成后,要获取一个可用于markdown的图片外链只需要:

  • 方式一: 右击电脑本地任意格式文件→点击你的自定义上传菜单→系统通知文件上传成功→到Markdown编辑器中粘贴!
  • 方式二: 截图并点击复制到剪贴板→按快捷键→系统通知图片上传成功→到Markdown编辑器中粘贴!
  • 方式三: 右击网页中的图片→点击复制图片→按上传快捷键→系统弹出上传成功通知→到Markdown编辑器中粘贴!
  • 方式四: 使用网页版上传,包括拖放上传(支持多文件)、复制本地图片文件后粘贴上传、截图后粘贴上传、复制网页上的图片后粘贴上传、点击上传按钮选择图片后上传(支持多文件)。

主要功能

  • 支持Mac和Windows(也可用于Linux服务器端)、理论上也支持Linux桌面版,只要你能添加右键菜单或者用快捷键调用上传命令的话;
  • 支持图片压缩后上传(支持jpg/png/webp,gif/bmp不支持压缩);
  • 支持添加水印后上传(支持文字水印、图片水印、自定义水印颜色/透明度/角度/位置,支持jpg/png/bmp/webp,gif不支持水印);
  • 返回的链接可自定义(如原始链接、Markdown格式链接、可点击的Markdown格式链接、完全自定义的链接);
  • 完全自定义上传文件名(可选变量有当前年、月、日、当前时间戳,随机字符串(可调长度))
  • 可作为MWeb的API使用,可作为PicGo、ShareX、uPic等的自定义图床使用;
  • 支持快捷键上传剪贴板中的图片(配合PicUploaderHelper/Alfred/WinHotKey使用);
  • 支持Web端拖放、粘贴、或直接选择上传图片;
  • 支持Web端设置所有参数;
  • 支持上传任意格式文件(除了图片,还可以上传任意格式文件,只要你的存储端支持就行);
  • 目前支持的图床:七牛、阿里、腾讯、华为、网易、京东、百度、又拍、青云、Ucloud、sm.ms、Imgur、Github、Gitee(码云)、微博、Nextcloud、Cloudinary、Chevereto、Minio、Aws s3、金山、个人服务器(sftp)、本地(即PicUploader所在机器)。

使用演示

Mac演示
Mac-demo.gif

Win10演示
Win10-upload by right click

Win7演示
Win7-upload by right click

Web版演示:

注册存储服务器账号

要上传图片要先填写你要上传的,注册各个云存储的方法具体请查看:PicUploader: 各图床获取上传图片参数的方法。

如果有自己的服务器,建议参考我这篇文章:使用nginx负载均衡+多个云的免费额度打造免费markdown图床。

以下为在Mac上使用的文档,在Windows上使用请查看:在Windows上使用PicUploader。

开始使用

好用的话麻烦github给个star呀!

下载PicUploader

打开“终端”,使用以下命令创建一个文件夹www(用普通用户,不要用root用户):

mkdir ~/www
Bash

进入创建的www目录中:

cd ~/www
Bash

使用以下命令下载PicUploader:

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

有时候可能速度非常慢甚至出现类似以下的报错:

$ git clone https://github.com/xiebruce/PicUploader.git
Cloning into 'PicUploader'...
remote: Enumerating objects: 475, done.
remote: Counting objects: 100% (475/475), done.
remote: Compressing objects: 100% (332/332), done.
error: RPC failed; curl 56 OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 10054
fatal: the remote end hung up unexpectedly
fatal: early EOF
fatal: index-pack failed
Bash

解决方法是设置一个git代理(但要求你有科学上网(番羽土墙)工具,其中1087是本地代理工具监听的http端口,你的端口未必和我的一样,怎么查看科学上网工具监听的http端口请自己上网查):

git config --global http.proxy 'http://127.0.0.1:1087'
Bash

设置完可用这个命令查看是否设置成功(一般最新的设置都在最后一行):

git config --list
Bash

如果设置成功了,然后再执行前面的命令来下载一般就没问题了。

如果实在不行(比如你没有科学上网(番羽土墙)的方法,下载又慢的话),那就直接下载然后解压到phpstudy的~/www目录中吧,下载地址:PicUploader,但我非常不建议用这种方法,因为用这种方法更新很麻烦,每次都得下载压缩包,然后解压覆盖一遍(覆盖之前还得把config-local.php和“.settings”文件夹复制出来,等新的弄好再放回去,这样配置就不会丢)。

PS: 好用的话麻烦github给个star呀!

更新PicUploader

以后要更新的话,在终端中使用以下命令进入PicUploader目录:

cd ~/www/PicUploader
Bash

然后使用以下命令即可更新(注意要用普通用户,不要用root):

git pull
Bash

填写配置

方式一(推荐): 在Web端设置,请查看:在Mac上使用Web版;

方式二: 手动修改配置文件(如果使用了web端配置则不需要该方式):
– 把PicUploader/config/config.php文件command+D复制一份,命名为config-local.php,然后在config-local.php中修改你的配置(你想用哪个云就配置哪个)即可。

以配置七牛云存储为例,在config-local.php文件中找到以下代码,填好AK/SK/bucket/domain四个参数,如果不知道参数怎么来,请查看PicUploader: 各图床获取上传图片参数的方法。

//Qiniu Cloud
'qiniu' => [
    'name' => '七牛云',
    //七牛云AppKey
    'AK' => 'ASG********************************0AoF',
    //七牛云AppSecret
    'SK' => 'Uo*********************************lkEy',
    //七牛云对象存储空间名
    'bucket' => 'markdown',
    //七牛云外链域名(域名要自己绑定,因为默认域名30天后会被回收)
    'domain' => 'http://pe5scgdex.bkt.clouddn.com',
    //七牛优化参数,直接加在链接后面,但是不会优化原图,只会优化输出的图片,如果不需要可以不配置该项(即注释掉)
    'optimize' => '?imageMogr2/thumbnail/800x/strip/quality/80',
    //存储目录,可使用年月日点位符,如 {Y}/{m}/{d},真正被解析出来的时候会被替换成当前的年月日(如 2019/05/10)
    //{Y}表示当前的年(注意Y是大写),{m}表示当前月(有前导0,即1-9月会显示成01-09),{d}会被替换为当前日期,有前导0(即1-9日会替换为01-09)
    'directory' => '',
],
PHP

注意,支持设置directory的云服务器,都可以用{Y}代表年(注意Y大写),{m}代表月,{d}代表日,例:

# 最后加斜杠是因为后面要跟着文件名,如果不加,日期将会和文件名连着。
'directory' => 'travel/{Y}/{m}/{d}/',

真正上传的时候,travel/{Y}/{m}/{d}/的值将会变成这种形式travel/2019/05/10/(即{Y}/{m}/{d}被替换成了当前的年月日)。

搜索storageType(注意是storageType,而不是storageTypes),并在=>后设置您当前要使用哪个云,如我要使用七牛云:

'storageType' => 'Qiniu',
PHP

支持同时上传到多个云,只需逗号隔开即可,比如我现在就同时上传到6个云(多个云会使用最后一个云的域名作为返回域名):

'storageType' => 'Qiniu,Tencent,Netease,Upyun,Qingcloud,Ucloud',
PHP

也许你会觉得奇怪,同时上传到那么多云干嘛?看了这篇文章你就知道了:使用nginx负载均衡+多个云的免费额度打造免费markdown图床。

水印及其他配置直接参考配置文件的注释(还是推荐配置Web版进行设置,因为有界面方便很多:在Mac上使用Web版、在Windows上使用Web版)。

添加右键上传菜单

注意每一个需要选择的地方都不要选错,其中最后一步保存的文件名,将出现在右键菜单上,你可以自己取一个自己喜欢的名字,比如“上传文件”或“获取Markdown外链”等等。

export LC_CTYPE="zh_CN.UTF-8"
/usr/bin/php /Users/用户名/www/PicUploader/index.php "$@" | pbcopy
PHP

注意/usr/bin/php这个路径,如果你没自己装过php,那就肯定是这个路径,如果不确定,可以在终端用which php命令来查看它的路径,如果执行which php命令后输出的不是/usr/bin/php,则以which php命令输出的为准。

把“/Users/用户名/www/PicUploader/index.php”成你自己的index.php路径(右击index.php文件出来菜单后,按住option键,复制按钮就会变成复制路径按钮)。

特别注意:Mac自带php在处理图片方面有问题,如果你要在上传前先压缩或添加水印,那么需要使用以下命令安装新的php,否则会无法使用(如果你以前没有这么安装过,安装时间可能会稍长,请保持电脑不要自动睡眠),

brew install php
Bash

该命令需要使用到brew命令,如果你不知道什么是brew并且没有安装过,请先安装:Mac安装Homebrew并更换国内镜像源。

安装后,上面的/usr/bin/php请直接改成/usr/local/bin/php。

如果你不需要在上传前压缩、添加水印:
如果你不需要在上传前压缩、添加水印,那么请把imgWidth的值改成0,并把resizeOptions中的percentage改为0,这样上传图片就不会压缩了,另外还要把watermark中的useWatermark的值改为0,这样就不会添加水印了,只要不压缩图片,不对图片添加水印,使用自带的php就没问题(否则会报错)。

另外php需要安装fileinfo、gd、curl、exif、pdo_sqlite这些扩展,如果默认没有那就需要安装,查看php有哪些扩展的命令:

php -m
Bash

安装扩展请查看:Mac Homebrew1.5以后安装php扩展的方法。

上传任意格式文件:
需要注意的是,上传非图片的其他任意格式文件时,选择的存储服务器必须支持上传任意文件,,当然github/gitee/sftp/local也是可以存任意文件的。

除了视频和音频可设置返回格式外,其他格式文件都返回Markdown格式链接(与图片的Markdown链接相比只少一个感叹号),并且Web版未对图片以外的文件做处理,所以Web版目前只能上传图片。

上传试试

右击任意一张图片或任意一个文件,最后一个按钮是不是就是你刚刚保存的Services名称?如果你电脑上没看见,是因为你电脑上超过5个这种类似的菜单,它就自动收到二级菜单下了,其实很多菜单根本用不到,你可以到系统偏好设置→键盘→快捷键→服务(Services)里面找到对应的按钮,把它们的勾去掉就行:
Xnip2018-09-07_23-58-26.png

如果一切正常,你对着图片右击,并点击右键菜单中的获取Markdown链接后,你将会在Mac顶部工具栏那里看到一个小齿轮在转动,说明图片正在上传,当小齿轮停止转动(不需要等它消失),即说明上传已经完成,同时右上角会弹出通知,此时剪贴板已经有你上传的图片地址了,直接到markdown编辑器command+v粘贴试试吧。

查看上传日志

如果你搭建了Web版本,直接在Web上看,非常方便:
Xnip2019-05-01_00-59-45.jpg

否则就可能自己看日志文件了:因为在配置文件中的logPath可以配置日志显示在桌面,’logPath’ => ‘desktop’ ,所以不出意外,你的桌面装会有一个如下图所示的文件夹,这里保存了你上传的图片的Markdown外链地址,你在七牛云(或者其他服务器)是能找到对应的图片的,如果你觉得哪张图片不想要,可以在对应服务器中把它删除了。

这个日志文件也是markdown格式,所以你可以用markdown编辑器查看它,日志是倒序添加的,即最新上传的图片在最前面。

在Mac上使用Web版

Web版效果预览

Web端上传图片示例:支持拖拽上传、截图粘贴上传、复制图片文件粘贴上传:

使用Web端配置参数,简单直观:

安装Homebrew

如果你没有安装过Homebrew,请先安装:Mac安装Homebrew并更换国内镜像源。

设置默认打开方式:
(一定要做这一步,否则下边的open命令可能无法使用)使用文本编辑软件新建一个文件,保存成任意名字到任意地方(但要你在访达中能找到),然后找到你保存的文件,把它的后缀名修改成.conf,然后右击→显示简介→打开方式,如下图,选择“文本编辑.app”为打开方式,并点击全部更改,弹出问你是否继续,点继续,这样就搞定了,这个文件是没用的,等下边的东西设置好了,就可以删掉。
Xnip2019-04-17_14-01-24

安装php

使用Homebrew安装php

brew install php
Bash

修改php-fpm运行用户和组(注意其中的7.3以后可能变成7.4,7.5,未必是7.3):

open /usr/local/etc/php/7.3/php-fpm.d/www.conf
Bash

打开后,找到以下代码位置(cmd+F搜索即可):

user = _www
group = _www
Ini

把它们修改成以下这样然后保存退出:

user = 你的用户名
group = staff
Ini

你的用户名,用whoami命令可以获取(注意当前不要是root用户,不能填root)。

启动php-fpm:

brew services start php
Bash

或者你之前启动了,那就重启:

brew services restart php
Bash

安装nginx

在终端工具下执行以下命令以安装nginx:

brew install nginx
Bash

配置nginx

修改nginx的运行用户和组

open /usr/local/etc/nginx/nginx.conf
Bash

在它的第一行应该有一个#user nobody;,把它改成:user 你的用户名 staff;,那你的用户名是什么呢?在终端运行whoami命令即可获取。
比如我的就是:

user bruce staff;

创建一个虚拟主机文件夹

mkdir /usr/local/etc/nginx/servers
Bash

在访达中打开该文件夹:

open /usr/local/etc/nginx/servers
Bash

把以下配置保存成api.picuploader.com.conf文件,注意保存的时候要把root /Users/bruce/www/personal/PicUploader;中的PicUploader路径修改成你的PicUploader所在路径,然后把保存的文件拖到到前边打开的文件夹(/usr/local/etc/nginx/servers)中:

server {
    listen 80;
    server_name api.picuploader.com;

    client_header_timeout 60s;
    client_body_timeout 60s;
    send_timeout 60s;
    keepalive_timeout  65s;

    access_log /usr/local/var/log/nginx/api.picuploader.com.error.log combined;
    error_log /usr/local/var/log/nginx/api.picuploader.com.error.log error;

    root /Users/bruce/www/personal/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;
    }
}
nginx

特别注意: 由于index.php之前已经使用,所以网页的index文件并非index.php,而是dashboard.php,所以上边的location里,一定要写index dashboard.php;,我提供的配置文件已经这么写了,也就是说你不要自己改动就行。

启动nginx(启动后以后开机它会自动启动):

sudo brew services start nginx
Bash

打开host文件

open /etc/hosts
Bash

在文件最后添加:

127.0.0.1       api.picuploader.com
Ini

cmd+s保存后,关闭文件即可。

配置完成

上边已经配置完php+nginx,如果一切正常,浏览器访问http://api.picuploader.com就可以打开后台了。

进去之后,首先要设置你要使用的云的参数:
Xnip2019-04-21_21-06-00.jpg

然后这里选择要上传到哪些云,以及其他的一些参数,注意勾选的云必须要设置它的相应参数,否则肯定是无法上传的:
Xnip2019-05-20_14-43-32.jpg

配置好参数之后,就可以使用了,上传方式:

  • 1、选择文件上传,最传统的,没什么好说的;
  • 2、拖放上传,可同时拖放多张图片到上传区域,支持jpg/png/gif;
  • 3、粘贴上传,一次只能粘贴一张,即使你复制了多张,也只能粘贴一张:
    1)可以复制本地图片文件后到上传区域ctrl+v(win)或cmd+v(mac)粘贴;
    2)也可以右击网页上的图片→复制图片后到上传区域ctrl+v(win)或cmd+v(mac)粘贴;
    3)还可以截图→复制到剪贴板后在上传区域ctrl+v(win)或cmd+v(mac)粘贴;
    4)并且无论你复制的图片是jpg/png/gif格式,又或者是其他格式图片,只要用粘贴的方式上传,都会被转为一个名叫image.png的图片,这个是技术上无法左右的,这是浏览器自动将粘贴的图片转成png文件后再交给js进行处理的。

前面已经说过,在Web端粘贴上传,截图会被浏览器转成image.png再传给PicUploader,无论你是复制的图片文件(不管是jpg/png/gif),还是截图,还是网页右击复制图片,最终都会被转成image.png,并且转成的这个图片还是全分辨率的,怎么全分辨率呢?比如我的Macbook Pro,retina屏系统显示分辨率是1440×900,但retina屏是4个点一个像素(横着两个点,竖着两个点),所以浏览器把你截的图变成图片的长宽分别是1440×2和900×2,即2880×1800,这个分辨率存成的图片是比较大的,至少对一个截图来说,很大,基本上是2M多,差不多3M,以下是我在我的Mac全屏截取一个截图,用不同浏览器打开网页版并粘贴,大小如下:
Xnip2019-04-20_12-19-26
可以看到,除了Safari,其他的浏览器都差不多,Safari毕竟是苹果自家的,可能做了特殊处理。

这个差不多3M的图传给PicUploader之后,假设PicUploader设置压缩比为50%,并且png压缩等级为9,我试了压缩后是800多k,所以,直接粘贴上传的图会“略大”,当然,最终大小会与你当前的屏幕分辨率及你截图的区域多大以及你设置的压缩百分比,压缩等级有关。

注意: 使用Web版来设置配置后,config-local.php和config.php来会用于读取默认参数(有config-local.php时config.php无效,无config-local.php时会读取config.php)。

快捷键上传方式一:使用Alfred(推荐)

Upload by Alfred shortcut

Alfred简介

Alfred是Mac上的一个效率工具,它最经典的就是类似Mac自带的“聚焦搜索”的功能,它的大概功能可以查看这里。

Alfred体积非常小,不到8M,占用内存也非常小。Alfred本身免费,但它的“Powerpack”(可理解为“增强功能包”)是收费的(39英镑≈341元终身授权),当然你也可以用PJ版(可以去waitsun.com找),但PJ版一般跟不上系统版本,如果你喜欢用最新系统,可能有时候用不了。

安装pngpaste

快捷键上传,其实就是通过按快捷键调用命令,获取到系统剪贴板中的图片并把它保存成图片文件,然后上传该图片文件。目前最方便的就是通过pngpaste来获取,所以我们需要安装pngpaste。

使用brew安装pngpaste:

brew install pngpaste
Bash

安装Alfred工作流插件

进入PicUploader的accessorys/PicUploaderHelper文件夹,找到PicUploaderHelper.alfredworkflow插件,双击它即会自动用Alfred打开,如下图所示,点击import导入:
Xnip2019-04-21_21-13-25.jpg

导入后界面如下图所示,然后我们双击下图所示的第一个图标(用于添加快捷键):
Xnip2019-04-21_21-15-30.jpg

上一步双击第一个图标后,来到这个界面,鼠标选中HotKey输入框,但注意这里不是让你输入的,而是直接录制快捷键的,你直接按你想要上传图片的快捷键,它会自动录下来,下边的参数都不用改,点击保存即可(下次如果想修改快捷键,还是用这种办法):
Xnip2019-04-21_21-15-02.jpg

双击第二个图标:
Xnip2019-04-21_21-20-55.jpg

来到这个界面,我们要做的就是修改这一段命令:
-w781

这段命令是这样的:

/usr/local/bin/php /Users/bruce/www/personal/PicUploader/index.php --type=alfred
Bash
  • 其中/usr/local/bin/php是php可执行文件路径,要改成你电脑上php可执行文件的路径,如果你是brew安装的,那么就是/usr/local/bin/php,如果是自带的,那就是/usr/bin/php;
  • 中间那一段,其实就是PicUploader的入口文件index.php的绝对路径;
  • 最后一段--type=alfred是固定这么写,不需要改;
  • 三段之间有空格隔开。

最后双击第三个图标,勾选下图所示的第一个选项:
screenshot.jpeg
该选项表示自动把返回的链接粘贴到编辑器中,当然这要求你按上传快捷键的时候光标是处于编辑器界面中(但这个功能有时候不灵,不知道为什么)。

然后就可以使用了,使用任意截图工具截一个图到剪贴板,直接在编辑器要粘贴图片的地方按下刚刚在Alfred设置的快捷键,稍等片刻,返回的markdown格式外链即会自动粘贴到编辑器中,效果演示gif图在前面,同时系统会通知上传成功。

快捷键上传方式二:使用Python

Mac-shortcut-upload-demo.gif

安装python依赖

如果你电脑没安装过python,请先看Mac同时安装python2.7和python3。
由于该助手使用python编写,需要用到pynput(用于监听快捷键)和Pillow(用于获取图片)两个模块,所以需要先安装这两个模块:

pip install pynput
pip install Pillow
Bash

本插件需要使用python3,如果你电脑中安装了python2.7和python3两个版本,要注意pip是对应的哪个版本,用pip -V即可查看,一般根据安装方式的不同有可能是“pip”和“pip3”(此时pip就是pip2.7),也有可能是“pip”和“pip2”(此时pip就是pip3)。

使用PicUploaderHelper.py

PicUploaderHelper就在PicUploader的accessorys/PicUploaderHelper文件夹中,该文件夹中有以下几个文件:

├── PicUploaderHelper.alfredworkflow    # Alfred插件(Mac)
├── PicUploaderHelper.py                # 助手主程序(Mac/Win可用但有更好的方法“WinHotKey”)
├── config.json                         # 助手配置文件(Mac/Linux)
├── config_win.json                     # 助手配置文件(Win)
├── dump-clipboard-jpg.ps1              # 导出剪贴板图片为jpg(Win)
├── dump-clipboard-png.ps1              # 导出剪贴板图片为png(Win)
├── generatesh.sh                       # 生成启动脚本的脚本(Mac)
└── notification.ps1                    # 系统通知脚本(Win)

在终端工具中进入PicUploaderHelper文件夹,执行:

chmod u+x generatesh.sh && ./generatesh.sh
Bash

注意:如果你后面想移动该文件夹到别处,那么需要重新执行./generatesh.sh重新生成启动脚本,原来的不用删除,会自动覆盖,但建议直接保持在原位不要移动。

根据提示输入python3的可执行命令(可以先用python -V和python3 -V,看显示的版本,哪个是python3就输入哪个),回车即可生成开机启动文件PicUploaderHelper-start.sh,然后右击它→选择显示简介→设置打开方式为iTerm(或其他你自己习惯用的终端工具都行),但不要点击“全部更改”,因为没必要。
sharex-customize-upload-demo.gif

注意,如果你想使用系统自带终端为默认打开方式也可以,但是默认没的选,你要选择其他:
Xnip2019-03-25_00-08-47

然后在启用里面选择“所有应用程序”,这样才能选择自带的“终端”,否则是灰色的选不了:
Xnip2019-03-25_00-07-39

但用自带终端有一个问题,开机启动后,它会自动打开这个终端并启动PicUploaderHelper,而且启动后它会一直停留在那里,不会自动关闭,你需要手动装它关闭,而iTerm2会自动关闭窗口:
Xnip2019-03-24_23-55-55

配置文件解析

{
    "img_type": "JPEG",
    "php_path": "/usr/local/bin/php",
    "picuploader_index_path": "/Users/bruce/www/personal/PicUploader/index.php",
    "notification": {
        "success": {
            "title": "上传成功",
            "subtitle": "",
            "message": "链接已在剪贴板中,请直接去粘贴"
        },
        "no_image": {
            "title": "未检测到图片",
            "subtitle": "",
            "message": "未检测到剪贴板中有图片,请先截图"
        },
        "uploading": {
          "title": "文件上传中…",
          "subtitle": "",
          "message": "文件正在上传,请稍等片刻"
        },
        "failed": {
            "title": "上传失败",
            "subtitle": "",
            "message": "文件上传失败,请粘贴或去日志看是否有报错信息"
        }
    },
    "key_combinations": [
        ["alt", "shift", "¨"]
    ],
    "debug": 0
}
JSON

按以下解释,修改你自己的配置,主要是php_path和picuploader_index_path要修改,其他的一般不需要修改,当然你也可以改。

  • img_type:两个可选值JPEG或PNG(不能写其他格式),这将决定你最终上传的图片的格式为.png还是.jpg。
  • php_path:php可执行文件路径,使用which php命令可获得,并修改成你自己的路径。
  • picuploader_index_path:PicUploader的入口文件index.php的路径,这个路径要修改成你自己的路径。
  • notification:通知消息,有上传成功、未检测到图片及上传失败三种,你可以修改里面的title、subtitle(一般不用)、message为你自己想要的。
  • key_combinations:快捷键,使用数组方式指定,像上边默认的就是cmd+shift+u,每一组快捷键都用中括号括住(其实就是python的列表),特别注意,如果你的快捷键用到了alt,那会比较不一样,alt+ctrl目前由于使用的pynput原因无法使用,假设你要设置alt+shift+u,配置文件里不能直接写u,而是你要直接按住alt+shift,再按u,它出来什么符号就是什么符号,不要手工修改它,另外如果出来的符号带“\x”的快捷键不可用而且会导致报错,如果出来的符号带<数字>这样的也不可用,你可以在配置文件设置debug为1(开启debug模式),这样即可在与PicUploaderHelper.py文件同目录下生成一个key_log.txt文件,该文件会记录下你按下的每一个键最终识别出来的都是什么。为了方便查看,你可以新开一个终端窗口,使用以下命令监控key_log.txt的变化:
tail -f -n 5 key_log.txt
Bash

几个按键的写法(左侧为原按键,右侧为定义快捷键的写法):

左shift => shift
右shift => shift_r
左option => alt
右option => alt_r
左command => cmd
右command => cmd_r
左control => ctrl

debug:两个值0或1,0为关闭调试模式,1为开启调试模式

运行PicUploaderHelper

如果你有Alfred,强烈推荐使用方式一。

运行前,要把运行终端比如iTerm2(或者你自己习惯用的其它终端工具)加入到系统偏好设置→安装与隐私→辅助功能里面,注意,你设置了“PicUploaderHelper-start.sh”文件使用哪个终端打开,就把哪个终端加入到系统的辅助功能里。
运行: 先在iTerm2用sudo -s切换到root,把PicUploaderHelper-start.sh拖动到iTerm2中,回车运行即可,当然你也可以进入它所在的文件夹中然后用sudo ./PicUploaderHelper-start.sh来运行(重复运行会先杀死原有进程并启动新进程,此时进程id会改变)。

关闭: 先查找进程id号

ps aux | grep -v "grep" | grep PicUploaderHelper
Bash

然后使用以下命令关闭:

kill -9 进程id号
Bash

测试: 先不要截图,直接按上传快捷键,正常会弹出通知告诉你剪贴板未检测到图片(前面配置文件解析也说了,这个提示文字你可以自己在配置里修改):
-w343

上传图片: 然后你就可以截图→按快捷键上传了,注意截图的时候要“复制到剪贴板”而不是保存文件,如果你保存成文件,那你还得用右击图片的方式上传。

加入开机启动: 本来macOS的服务类型的程序开机启动最好用launchctl的或者直接把它转成app程序的,但由于系统限制原因,目前用launchctl虽然能正常启动,但是无法响应快捷键,而转成app程序运行的时候会报错,目前我还转不了,所以使用开机登录项来做开机启动(当然如果你不嫌麻烦,可以不做这个开启启动,只要开机后自己sudo ./PicUploaderHelper-start.sh运行即可):
Xnip2019-03-23_06-43-38

注意,当你关机了,下次你开机的时候,如果你设置的是用iTerm2打开启动脚本,它会弹出以下提示,那个选项是不要提示的意思,把它勾上就行:
Xnip2019-03-23_02-25-26

把它勾上之后,再下次开机登录后,iTerm2会自动打开闪一下又关闭,其实它就是在启动PicUploaderHelper(但如果是自带的终端,就会一直显示,要你手动关闭)。

原理

后台运行PicUploaderHelper.py,PicUploaderHelper.py会监听全局快捷键,当按下快捷键时,PicUploaderHelper.py会检测剪贴板中是否存在图片:
1、如果不存在,它会弹出一个通知(调用applescript来实现),告诉你未检测到图片,没有图片的通知消息具体内容可由配置文件中的no_image部分自定义。
2、如果有图片,PicUploaderHelper.py会把剪贴板中的图片生成一个文件保存到与PicUploaderHelper.py同级目录中,文件名为.screenshot.xxx(由于是.开头所以是隐藏文件),xxx是图片类型,由配置文件中的img_type指定,img_type只能指定两种类型,一种是PNG,一种是JPEG。图片保存后,即会调用PicUploader来上传,上传完成会弹出通知,弹出通知后markdown格式地址已经在剪贴板,直接去粘贴即可。要把它保存成图片的原因,是因为PicUploader的所有代码都是需要指定图片文件路径的(包括所使用的对象存储的接口都是传图片路径的)。

错误解决:按快捷键没反应

1、查看进程是否启动

ps aux | grep -v "grep" | grep PicUploaderHelper
Bash

2、如果未启动则再次执行以下命令启动:

sudo ./PicUploaderHelper-start.sh
Bash

如果无法启动,则查看“PicUploaderHelper”文件夹下的“PicUploaderHelper.log”看有没有报错,如果有报错无法解决,可以提issue。

3、如果已启动,查看是否把iTerm2加入到了系统偏好设置→安装与隐私→辅助功能?如果没有,请添加。而且要注意,添加到辅助功能里的终端,要跟PicUploaderHelper-start.sh设置的开打方式那个终端一致,所以,如果你用的不是iTerm2,而是系统自带的终端,又或者是其他的终端工具,就要注意这两个地方对应一下。

4、如果启动了还是不行,请修改配置文件中的debug值由0改为1(后边是没有逗号的,千万别加逗号),表示开启调试模式:

"debug": 1

再次使用sudo ./PicUploaderHelper-start.sh重启进程,然后你会看到PicUploaderHelper目录下会有一个key_log.txt,在终端中执行:

tail -f -n 5 ./key_log.txt
Bash

此时不管你按了什么按键,都会输出来,这样你就可以测试了,如果看到输出的是x开头的,或者<数字>这样的,那就说明设置的快捷键有问题,也就是说不能使用你当前设置的快捷键,要换一个试试,control+c退出,调试好之后,记得把debug关掉再重新启动。

在远程服务器上搭建Web版

远程服务器上搭建跟在本地搭建是一样的,一般使用nginx(用前面Mac版的nginx配置文件即可),当然你也可以用Apache,反正就相当于搭建网站,唯一不同的是,你需要有自己的域名,并且把域名解析到你的服务器ip上,而在本地则是直接在hosts文件中直接指定了ip,我这里也贴一下nginx配置文件吧:

server {
    listen 80;
    server_name api.picuploader.com;

    client_header_timeout 60s;
    client_body_timeout 60s;
    send_timeout 60s;
    keepalive_timeout  65s;

    access_log /usr/local/var/log/nginx/api.picuploader.com.error.log combined;
    error_log /usr/local/var/log/nginx/api.picuploader.com.error.log error;

    root /Users/bruce/www/personal/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;
    }
}
nginx

特别注意: 由于index.php之前已经使用,所以网页的index文件并非index.php,而是dashboard.php,所以上边的location里,一定要写index dashboard.php;,我提供的配置文件已经这么写了,也就是说你不要自己改动就行。

你要注意的是“access_log”、“error_log”、“root”这些路径填你自己电脑/服务器上的路径,并且注意“fastcgi_pass”参数,如果你是监听的socket,那就改成监听socket就行,例如fastcgi_pass unix:/dev/shm/php-cgi.sock;,当然你别照抄我的,你的sock文件名和路径可能跟我的都不一样。

注意: 要特别注意权限问题,要求php能在PicUploader目录创建文件夹/文件,只要做到PicUploader的所属用户与php-fpm和nginx的运行用户相同即可,这个在在Mac上使用Web版里讲的很清楚,一般来讲,我们习惯用www用户及www用户组来作为nginx以及php-fpm的用户及用户组,修改配置文件后,不要忘了重启nginx和php-fpm。

PicUploader的所有者也必须属于www用户和www组,设置PicUploader的所有者:

sudo chown -R www:www ./PicUploader
Bash

当然这个www用户必须存在,而且一般来说这个用户最好是“不能用于登录”的用户,创建非登录用户请看 Linux创建用于执行程序的非登录用户。

这个用户和用户组也未必要叫www,只要nginx/php-fpm/PicUploader三者对应同一个用户和用户组,并且你指定的用户和用户组确实是存在的就行。

另外由于没有做登录功能,为防止别人可以随意访问页面,请使用nginx做HTTP的密码认证即可:Nginx添加密码认证。

作为发布接口

作为MWeb的发布图片接口

先来看个demo:
Web版演示:

MWeb一样要使用前边配置好的nginx(或apache)服务器,点击mweb的偏好设置→发布(publishing)→点击右边最下面一个自定义(custom):
Xnip2019-04-29_00-35-52.jpg

按下图填写:
Xnip2019-04-29_00-34-50.jpg

注意,如果你把PicUploader部署在远程服务器上,一定要做Nginx添加密码认证,然后在本地浏览器上访问你的域名,这时会弹出让你输入账号密码的窗口,输入之后,打开浏览器控制台(右击→审查元素),按下图找到Authorization这一行:
Xnip2019-04-28_23-49-10.jpg

前面的Api URL什么的跟前面的填写方法一样,主要是下边那里,要添加一个字段,再把前面浏览器里找到的Authorization及它的值填进去,然后点Ok即可:
Xnip2019-04-28_23-50-55.jpg

写好文章后,点击顶部菜单栏中的的发布(publish)或编辑器右上角的分享按钮→上传本地图片到…(Upload Local Images to…):
Xnip2019-01-12_21-38-34.jpg

如下图,点击Upload Images(这是旧版Mweb,新版Mweb已经没这个按钮):
Xnip2019-01-12_21-48-23

新版的Mweb,直接点Copy Markdown就会上传图片,上传完就会自动把整个文档复制到剪贴板,你直接覆盖原文档就行,如果你忘记复制了,再次进入这个页面还是可以复制的,另外,只有本地图片才会出来在上传界面,已经上传过的图片是不会重复上传的这个可以放心:
-w543

作为PicGo的自定义图床

在PicGo的插件设置里,搜索“web-uploader”即会出来“web-uploader”插件,点击安装即可:
Xnip2019-07-01_23-38-10.jpg

填参数,设置参数后点击确定,并设置为默认图床:
– url:假设你配置的nginx或apache域名为http://api.picuploader.com,则下边的url就填http://api.picuploader.com/index.php;
– paramName:固定填picgo;
– jsonPath:固定填data.url;
Xnip2019-07-01_23-40-05.jpg
– customHeader:如果你把PicUploader部署在远程服务器上,一定要做Nginx添加密码认证,然后这里的customHeader就要传“authorization”参数,它的格式是标准json格式(如下所示):

{"authorization":"Basic eGllYnJ1XUSKIlheXUzNTc1NjI="}
JSON

其中“Basic”后面那一串值从哪来呢?请参考作为MWeb的发布图片接口。
– customBody:这个是向post请求的body传参的,也是标准json格式,目前这里用不到,留空就行。

最后,右击顶部菜单栏的PicGo图标(Mac版),选择使用“自定义web图床”为默认图床(win也有对应的地方,我就不截图了):
screenshot.jpeg
这样PicGo就会通过PicUploader来上传图片了。

作为ShareX的自定义图床

作为自定义图床,其实就是提供上传API,凡是提供上传API你都要自己搭建服务,用nginx可以,用apache也可以,具体见:在Windows上使用Web版

先看演示:
sharex-customize-upload-demo_optimized_optimized.gif

如下图所示,在sharex中点击Destinations→Custom Uploader Settings...:
Xnip2019-04-29_01-10-54.jpg

按下图操作(其中Headers→authorization的值参考作为MWeb的发布图片接口):
Xnip2019-04-29_01-03-20.jpg

response(上传完成返回的格式)这里,看你自己要什么格式,直接填这个![json:data.filename](json:data.url)就是markdown格式,主要知道json:data.url变量是上传后返回的链接,json:data.filename变量是原始文件名:
Xnip2019-04-29_01-08-53.jpg

设置完之后,图片上传选择自定义接口:
Xnip2019-04-29_01-16-11.jpg

文件上传也选择自定义接口:
Xnip2019-04-29_01-16-48.jpg

作为uPic的自定义图床

Xnip2019-07-26_10-48-20.jpg

添加header(其中Headers→authorization的值参考作为MWeb的发布图片接口):
Xnip2019-07-26_10-51-50

其它

关于压缩

原压缩选项imgWidth即将废弃,建议使用新的压缩选项resizeOptions,当这两个选项同时存储的情况下会使用resizeOptions选项,此时imgWidth选项无效。

不做Gif图压缩及添加水印的原因: Gif图原理是多张静态图片组成的,如果要压缩或添加水印,其实就是把它的多张图片压缩添加水印后再重新合成gif,这个过程其实是比较慢的,特别是图片大的时候就更慢,所以为了快速上传,我建议你自己压缩后再来上传,对于Mac,其实有个比较简单的压缩方式。

Mac压缩gif图的方法

安装imagemagick:

brew install imagemagick
Bash

下载optgif.zip,解压后给它添加执行权限:

chmod u+x ./optgif.sh
Bash

把它移动到/usr/local/bin:

mv ./optgif.sh /usr/local/bin
Bash

在~/.bashrc或~/.zshrc中添加alias:

alias optgif=optgif.sh
Bash

重新读取初始化配置文件:

source ~/.bashrc
Bash

或者你用zsh的话就是

source ~/.zshrc
Bash

转换单个gif文件:

optgif xxxxxx.gif
Bash

转换多个gif文件(空格格开):

optgif aaaa.gif bbbb.gif ccc.gif
Bash

转换指定目录中的所有gif文件:

optgif testfolder/*
Bash

转换后的文件位置与源文件所在位置相同,文件名多了一个_optimized。

转换原理: 利用imagemagick的convert命令进行优化压缩:

convert test.gif -layers Optimize result.gif
Bash

Windows上应该也有的,不过我没试过。

Mac压缩mp4视频的方法

使用ffmpeg压缩,ffmpeg非常强大,应该可以做任何视频相关的操作,我这里只说最简单的压缩:

ffmpeg -i 被压缩视频.mp4 压缩后的视频.mp4
Bash

这样我11.9M的视频压缩成2.9M,也是挺厉害的,其他复杂的操作可以自己上网查。

如果你用的是七牛云,则返回的图片地址中『?imageMogr2/thumbnail/800x/strip/quality/80』这部分是七牛云的压缩参数(如果你配置了的话),也就是说这部分参数你可以去掉直接查看你上传的图,其中thumbnail/800x表示设置宽度为800,strip表示去除一些exif信息以减小图片大小,quality/80表示设置图片质量为原来的80%,其实还可以在最后加个/format/webp这样图片加载会快很多,因为webp能在最大程度还原图片清晰度的同时把图片体积降到最小。

关于Nextcloud

nextcloud为自建云网盘,并非对象存储,根据我目前的了解,NextCloud并不支持递归创建文件夹,也就是说,上传创建一个文件,如果要带路径,那么路径中的文件夹必须已经存在,如果不存在则要先创建,而文件夹创建一样不支持递归创建,所以得一级一级创建,并且创建之前我还得知道这个文件夹是否存在,所以Nextcloud上传文件,程序的实际步骤为:
– (请求一次接口)从服务器拉取现有文件列表,可指定深度,比如指定5级深度,则/a/b/c/d/e/f中的f是不会被列出来的,文件列表是递归列出的,比如有一个文件在/a/b/c/test.jpg,则列出的文件列表为:

/a/
/a/b/
/a/b/c/
/a/b/c/test.jpg

我得把要上传的文件路径,与这个列表比对,看看要上传的文件夹是否存在,如果不存在,我必须从父到子挨个创建,比如上面说的就要调用三次创建目录接口,一次文件上传接口。

上传完后并不会给你返回分享链接,因为它本身是一个网盘,要获取公共访问链接,还要请求接口,把它设置为公共分享,它才会返回分享的链接。

所以,往Nextcloud上传文件,假设上传的目录存在的情况下,要请求的接口次数为:获取文件列表一次+上传文件一次+设置公共分享一次=3次,而如果文件要上传的目标文件夹不存在,又要看文件夹哪几层不存在,假设有三层,三层都不存在,那创建文件夹就要请求3次,加上前边固定的3次那就是请求6次,所以上传会比较慢,毕竟一直在重复请求接口,建议不要自动创建文件夹了,这样就只要请求3次接口就可以获得链接了。

安装管理工具

因为图片上传到七牛云后,在七牛的后台实在无法直观的浏览和管理图片,如果你希望方便管理你的图片,可以下载两款谷歌浏览器插件:

qiniu upload files 用来管理七牛云上的图片

七牛云图床 一款可以让你直接上传图片到七牛云的工具,但是它没有分文件夹。

腾讯COS官方MacOS客户端:点击前往下载

百度BOS官方MasOS客户端:点击前往下载

如果是又拍云,因为又拍云没有网页管理工具,只能自己用ftp工具查看。

上传完成无法弹出通知问题

一般情况下,上传完成后右上角就会弹出通知,如果你没有弹出,有可能是因为系统没更新的问题,像我之前的系统版本一直是10.13.1,我的就不弹,但是我让别人试就会弹(后来我更新10.14(Mojave)系统后,就能正常弹出提示了)。

如果你的系统也没更新,那有可能也不会弹通知,那就只能看工具栏上的小齿轮,小齿轮停止转动说明上传完成(不需要等小齿轮消失,停止转动即已完成),然后就可以去markdown编辑器粘贴了。

说个不幸的消息

七牛云默认域名是测试域名,只能使用30天,30天后该域名会被回收,所以你需要绑定自己的域名,但绑定自己的域名需要域名已经备案,而域名备案是跟网站一块的,就是说如果你只买了域名没有自己的网站的话,是无法备案的,这时你可以看看有没有朋友有已备案的域名,叫他给你解析一个二级域名也行,因为一个人一般只用一两个二级域名,所以会有很多二级域名可用的。

又拍云也提供默认测试域名,不过我问过又拍客服,又拍云的测试域名是不会回收的,也就是你可以一直使用,不需要有自己已备案的域名,但缺点是,又拍云的默认域名提供的cdn服务器比较少,也就是说,你用又拍云默认的域名可能加载图片会比较慢,所以也是建议你绑定自己的域名,当然了,又拍云绑定自己的域名,同样要求域名已备案,国内所有云都有这个要求!

其他域名都不会回收,所以如果没有自己的网站(没有网站有域名也没用,因为域名必须备案,没有网站是无法单独给域名备案的),用七牛做云存储其实可以首先排除了!

更新日志

2019-10-21 v2.8.4版本
– Web控制面板刷新后,保持在当前位置(以前不管在哪个位置,刷新后都会回到首页)
– 网页版上传支持非图片文件
– 历史记录添加mime字段(注意,请把“db/PicUploader.db”文件添加一个字段,如果你不会添加,直接把它修改一个名字,这样会自动使用新的数据库文件,就看不到原来的记录了)
– 修复历史记录页面复制非图片文件的markdown链接时带感叹号的问题

2019-09-26 v2.8.3版本
– 添加支持自建对象存储服务器Minio
– 更新腾讯云sdk、aws-sdk

2019-09-10 v2.8.3版本
– 更新腾讯云、AWS等多个sdk
– 腾讯云添加s3兼容接口
– 微博上传已恢复

2019-09-03 v2.8.2版本
– 修改百度云、阿里云在设置了压缩图片或添加水印的情况下无法上传的问题
– 修改网易云上传失败问题
– 微博图床已经无法上传(不确定是否能解决)
– 其它bugfix。

2019-08-29 v2.8.1版本
– 全面整理了一遍文档,特别是Windows的,现在会好用的多
– 修改优化了各种小细节

2019-08-25 v2.8版本
– 修改sm.ms为v2接口,该接口为sm.ms新接口,要求注册并在后台拿到一个token
– 上传历史对sm.ms和Imgur添加删除链接(以前的移除只是移除本地记录)

2019-07-20 v2.7.9版本
– 添加对华为云、金山云、Chevereto、亚马逊S3的支持。

2019-07-07 v2.7.8版本
– 添加对Cloudinary的支持
– 添加对svg图片的支持
– 添加:批量删除上传历史记录
– 添加:输入页码后可回车跳转
– 添加:直接按左/右方向键可上一页/下一页
– 优化:删除时先用颜色显示删除的是哪一行(之前看不出是否删除了)
– 修复:作为Mweb接口上传时每次上传一两张图片就开始报错
– 修复:历史记录页面跳转页码一直是第一页

2019-05-15 v2.7.7版本
– 历史记录添加按原始文件名、url、日期搜索功能

2019-05-12 v2.7.6版本
– 添加支持上传到本地(PicUploader所在服务器)
– 添加支持directory可用点位符表示当前年月日,{Y}表示年,{m}表示月,{d}表示日。

2019-05-10 v2.7.5版本
– 添加上传时可直接修改目录(Web版),无需到每个云服务器配置中修改
– 修改上一个版本的各种小bug

2019-04-30 v2.7.4版本
– 添加查看历史记录页面(以前只有日志)
– 添加支持码云作为图床

2019-04-23 v2.7.3版本
– 新增支持自建云图床nextcloud

2019-04-22 v2.7.2版本
– 添加支持Alfred Workflow方式快捷键上传截图
– 合并Mac/Win版PicUploaderHelper
– 添加支持sftp协议上传到个人服务器
– bug修复

2019-04-20 v2.7.1版本
– 优化Web版上传体验并支持多文件上传(拖放和选择文件可支持多文件)
– 去除上传媒体类型限制,只要云存储支持,你可以上传任意格式的文件
– 修复无法压缩的bug
– 支持作为PicGo的第三方图床接口

2019-04-16 v2.7版本
– 新增web界面,可在界面上设置参数,可以web界面上拖拽传图、复制图片文件后在上面直接粘贴传图、截图复制到剪贴板后直接在上面粘贴传图。

2019-04-10 v2.6.6版本
– fixbugs
– 修改压缩方式为指定压缩比例及宽、高、图片文件大小超过指定值时才进行压缩

2019-03-30 v2.6.5版本
– 添加支持Github图床
– 添加支持Weibo图床

2019-03-27 v2.6.4版本
– 修改windows的右键安装工具为中文,修改编码为ANSI-GB2312(之前utf-8会导致中文菜单乱码),添加自定义菜单文字的功能。
– 修改默认字体文件名为拼音,因为在win10中测试如果字体为中文名会导致找不到字体文件
– 添加windows上的配置文档,详细讲解如何配置
– 修改图片处理插件中的抛出异常的bug
– 添加Windows版PicUploaderHelper及其配置使用文档

2019-03-25 v2.6.3版本
– 支持全局快捷键上传剪贴板中的图片

2019-01-12 v2.6.2版本
– 添加MWeb支持
– 添加网页版上传支持

2018-12-06 v2.6.1版本
– 添加支持Windows系统(理论上Linux系统一样可用,只要你能通过右键菜单或快捷键调用上传命令)

2018-11-24 v2.6版本
– 添加青云QingCloud及Ucloud的支持
– 修改结构,去除冗余代码
– 添加支持同时上传到多个云

2018-11-15 v2.5.2版本
– 用户指定日志位置后,只创建日志软链接(快捷方式),日志原文件存储在项目目录下的logs目录中

2018-11-13 v2.5.1版本
– 修复压缩无效的bug
– 修复压缩临时文件未删除的问题
– 添加压缩质量配置

2018-11-11 v2.5版本
– 添加支持Imgur

2018-10-20 v2.4版本
– 添加水印支持(支持文字水印、图片水印)
– 去掉了上传到sm.ms同时返回了删除链接的问题,但日志里还是会有删除链接

2018-09-21 v2.3版本
– 修改config结构
– 使用变量类名动态识别调用不同存储类型对应的类以精简代码
– 在每个类里动态调用配置文件

2018-09-19 v2.2.2版本
– 添加又拍云支持

2018-09-08 v2.2.1版本
– 解决图片文件名为中文时粘贴乱码或者无法粘贴的问题
– 修改了README.md中说的不清楚的地方,部分英文菜单改用中文

2018-09-06 v2.2版本
– 添加支持百度云
– 添加支持京东云
– 添加支持阿里云

2018-09-06 v2.1版本
– 添加支持网易云
– bug fix

2018-09-06 v2.0版本
– 完全重构代码
– 添加支持腾讯云
– 添加上传日志路径配置(可配置到桌面方便随时查看)

2018-09-01 v1.1版本
– 添加支持https://sm.ms,默认上传到sm.ms
– 添加mardownWithLink链接类型(点击图片后能跳转到图片链接)
– fix bug log时间设置成东八区

2018-08-30 v1.0版本
– 由于个人写markdown需要,目前现有的一些笔记软件都因为各种原因传图并不是很方便,于是写了这个小工具,想到可能有跟我一样需求的童鞋,就顺手发出来供有需要的童鞋使用,如有处理不好的地方在所难免,希望大家能批评指正!

参考资料

七牛云phpsdk文档
百度知道:没有个人网站怎么注册七牛云存储
sm.ms Api
GuzzleHttp官方文档
腾讯云phpsdk文档
网易云phpsdk文档
阿里云phpsdk文档
京东云phpsdk文档
百度云phpsdk文档
又拍云phpsdk文档
Imgur API
使用github的api上传文件到项目
Github REST API v3 – Create a file
新浪图床API接口及源码
NextCloud WebDAV Client API’s
NextCloud OCS Share API
Gitee码云-新建文件
Chevereto API version 1
Basic Usage Patterns of the AWS SDK for PHP Version 3
KS3 SDK For PHP使用指南
华为OBS php-sdk 文件上传
PHP image and video upload

from  https://web.archive.org/web/20191112082505/https://www.xiebruce.top/17.html

No comments:

Post a Comment