• 你是否平时有使用图床的需求？
• 你是否需要自己购买服务器？或使用类似七牛云的免费额度？
• 你是否每天要自己手动上传图片到图床，然后还要一个个复制链接？

今天教你一个命令行即可实现上面所有的功能，一秒钟搞定⚡⚡⚡ 重要的是免费，免费，免费😄

话不多说，show me the code

先看如何使用

• 先给大家看下最终使用的形式

• 电脑的任意位置，在终端里输入以下命令，搞定！

lzb upload /Users/jerome/Desktop/nest__nest-pipeline.jpeg

• lzb 是自己封装的命令行名字，大家自己随便起即可（相关命令行知识，这里不介绍，网上很多，就是Command包即可），cli部分可参考文末源码仓库
• upload 是命令的 action，也是自己起的
• 后面直接跟上你要上传的图片地址即可
• 🎉图片已经上传成功，并且直接返回链接了！是不是超级爽🎉

---

如果想直接用，不看原理，可以直接拉到最后github源码仓库

如何实现

1. 先在自己的 github上创建一个项目

• 这个名字是固定的，${用户名}.github.io 即可（不懂的可以参考 github pages相关文档) 可以直接域名访问了，这个也是免费的图床
• 例如我的：

---

2. 建好后把这项目 clone 到本地，方便后续上传

1. 后续就是把图片自动上传到这个项目中

---

3. 开始我们最主要的正文了，写自动化命令行

1. 初始化命令行的部分，这里就不赘述了，相关的请看下 command.js 这个库
2. 这里仅写最主要的 upload 命令实现的部分
3. 注意之前执行 upload 命令后，跟着的是 本地要上传的文件路径，也就是 filePath

import fs from 'fs';
import path from 'path';
import {exec} from 'child_process';

interface Arg {
    filePath:string;
    program:{
        server:string
        destPath:string
    };
}

const GITHUB_REPO_LOCAL = '/Users/jerome/rowin90.github.io'; // 这个就是我本地 clone 下来的那个之前建好的仓库的地址

export const handleUpload = async ({filePath, program}:Arg) => {


    const type:'github' | 'tencent' = 'github';
    // 如果你又其他的图床，你可以自己去定义
    // 我这里只写上传到 github，因为可以薅羊毛
    if (type === 'github') {
        uploadToGithub(filePath);
    } 
};

function uploadToGithub(filePath) {

    const virtualFileName = path.basename(filePath); // 获取文件名

   
     // 我这边自己约束了，文件名有 "__"的，那么 "__" 前表示要放的文件夹， "__"后是真正的文件名 
    // 如，你的图片名称是 “nest__nest-pipeline.jpeg” ,那表示要把图片放在 nest目录下，文件名是 nest-pipeline.jpeg
    // 这么做也是为了方便管理归类，不然后面图片都堆积在根目录，当然你可以不用，这只是我自己的约定
    let folderName, fileName;
    if (virtualFileName.includes('__')) {
        // 如果有文件夹形式
        [folderName, fileName] = virtualFileName.split('__');
    } else {
        fileName = virtualFileName;
    }
  

    let localRepoPath = `${GITHUB_REPO_LOCAL}/images/`; // 目标路径
    if (folderName) {
        // 如果有文件夹
        localRepoPath = `${GITHUB_REPO_LOCAL}/images/${folderName}`; // 目标路径
    }

    function runCommand(command):Promise<void> {
        return new Promise((resolve, reject) => {
            exec(command, (error, stdout) => {
                if (error) {
                    console.error(`exec error: ${error}`);
                    reject(error);
                } else {
                    console.log(stdout.trim());
                    resolve();
                }
            });
        });
    }

    // 创建文件夹，如果已存在则忽略
    runCommand(`mkdir -p ${localRepoPath}`)
        .then(() => runCommand(`cp ${filePath} ${localRepoPath}`))
        .then(() => runCommand(`mv ${localRepoPath}/${virtualFileName}  ${localRepoPath}/${fileName}`))
        .then(() => runCommand(`cd ${GITHUB_REPO_LOCAL} && git add . && git commit -m 'add: ${fileName}' && git push`))
        .then(() => console.log(`访问地址: https://rowin90.github.io/images/${folderName && folderName + '/'}${fileName}`))
        .catch((err) => console.error(err));
}

• 写完了，是不是很简单😄

---

4. 看看效果

1. 执行命令

lzb upload /Users/jerome/Desktop/nest__nest-pipeline.jpeg

1. 查看本地 clone下来的目录，是不是上传了

1. 再看下返回的执行完结果

1. 我们直接访问返回的地址

大功告成 ！！🎉🎉🎉

---

其他

• 其实我们把文件上传到自己建的 github.io 的仓库，github CI/CD自动帮我们构建和发布，所有上传后，稍微等一会，大概不到1分钟，就能看到自己上传的图片了，是不是很爽

• 几乎不需要任何成本，即可拥有属于自己的免费图床，而且1秒上传，小伙伴们快快行动吧！
• 本文主要介绍一个cli的实战，如果想学习基础的cli工具，建议参考前端亮点 or 提效？开发一款 Node CLI 终端工具!

仓库地址

仓库地址

• 直接复制，packages/cli-plus 即可，gitHub pages 的仓库自己建好修改下配置即可用