PhpDev.App
xiebruce/PicUploader

xiebruce/PicUploader

Stars: 1126

Forks: 168

Pull Requests: 8

Issues: 77

Watchers: 13

Last Updated: 2023-05-18 09:13:59

#mweb #markdown #picgo

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

License: MIT License

Languages: PHP, HTML, CSS, JavaScript, Python, Shell, PowerShell, Batchfile, Less, SCSS

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

PicUploader

PicUploader-logo.png

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。

功能演示

Mac右击图片上传演示、Mac快捷键上传截图演示、Win10右击图片上传演示、Win10快捷键上传截图演示
Win7右击图片上传演示、Win7快捷键上传截图演示、Web版多种上传方式演示、上传任意格式文件演示
MWeb上传图片演示、ShareX使用演示、查看上传记录演示

获取各图床的参数

参见：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添加密码认证。

点赞

如果觉得PicUploader还不错，给个star鼓励鼓励我吧！

如何支持我

方法一： 如果本工具确实能帮助到你，不妨打赏一下，鼓励一下我继续更新并维护PicUploader。
微信二维码

方法二： 如果你能看到我网站中的广告，麻烦帮忙点一下广告。

OPEN ISSUES

See all

RELEASES

See all