有了图床，让你写博客更舒服！

这篇文章给大家分享的是个人用自建图床搭建过程。

图床，也就是专门提供存储图片的地方，我们只要通过图床提供的 API 接口，把图片上传上去，就可以通过外链访问了，我们在CSDN发表文章，上传图片，其实就是用的CSDN的图床，但CSDN的图床有时候也挺不方便的。

比如，在我刚开始写博客的时候，我喜欢先在本地写，博客中的图片我都存储在本地的文件夹里。

然后在本地写完了，保存为.md文件。

再打开CSDN、上传Markdown，然后就会出现这样的错误：

如果一篇文章的图片多起来，事情就麻烦了，有时候还会漏掉一些图片。

如果我们自己搭建图床，直接把这些图片存储在云端，图片的来源是http服务，就没有这些问题了，本文就是以该思路来提供一个解决方案。

最终效果如下：

为了实现这样的效果，你需要：

• 一点Node.js的知识
• 一台VPS服务器，Linux、Windows都可以（本文使用的是Win Server、坑比Linux要多得多）
• 本文仅用作Mac用户作参考，因为用到了upic（开源图床客户端）

下载并且安装uPic

uPic(upload Picture) 是一款 Mac 端的图床(文件)上传客户端，可以将图片、各种文件上传到配置好的指定提供商的对象存储中。
然后快速获取可供互联网访问的文件 URL

不要去APP Store下载。

点击这个链接，前往Github下载dmg文件。

或者使用HomeBrew安装

brew cask install upic

在VPS服务器上安装minio

minio是可以部署在本地的对象存储服务。

根据VPS的系统不同，在官方文档里都能够找到对应的安装方法。

Mac和Linux安装都很方便，Windows下载下来就是一个exe，都不带安装过程的。

在CMD里启动服务：

./minio.exe server ./data

其中./data是指定的对象存储的文件所在位置。

打开之后默认会侦听9000端口，访问该端口可以进入服务。

然后，Win比较头疼的是如何将这句话变成一个服务，毕竟你总不能一直挂个命令行在上面吧。

先创建一个minio.bat文件，然后写入如下内容

@echo off
set MINIO_ACCESS_KEY=access_key
set MINIO_SECRET_KEY=secret_key
C:\Users\Administrator\Desktop\个人网站\minio.exe server C:\Users\Administrator\Desktop\个人网站\文件共享

将第四行的两个绝对路径分别替换成minio的路径和对象存储的路径即可。

然后可以运行一下./minio.bat看看是否能够成功运行。

要注意MINIO_ACCESS_KEY和MINIO_SECRET_KEY这两个参数，相当于minio的用户名和密码。

然后我们将这个脚本注册成服务，使用cmd的sc命令，格式如下：

sc create minioServer binpath=C:\Users\Administrator\Desktop\个人网站\minio.bat start=auto 

同样，把脚本的绝对路径替换成自己的。

这样我们就注册完服务，在服务管理页面能够看到该服务了，可以设置为开机自启动。

编写Nodejs后端

代码很简单，使用的Expressjs，抄的学长的代码。

const express = require('express')
const multer  = require('multer')
const Minio = require('minio')
const path = require('path')
const fs = require('fs')

const upload = multer({ dest: './tmp/' })
upload.limits = {
    fileSize: 10 * 1024 * 1024 // 最大 10MB
}

const app = express()

// minio 客户端
const minioClient = new Minio.Client({
    endPoint: 'xxxxxx', // 替换 minio 的访问地址
    port: 9000,
    useSSL: false,
    accessKey: 'xxxxx', // 替换 accessKey
    secretKey: 'xxxxxx' // 替换 secretKey
});

const handleError = (err, res) => {
    res
        .status(500)
        .contentType("text/plain")
        .end("Oops! Something went wrong!");
};

app.post('/', upload.single('file'), function(req, res, next) {
    // 检查 token
    const token = req.get('token')
    if (token !== 'xxxxxxx') { // 替换鉴权 token
        return handleError('', res)
    }
    // 文件临时存储文件夹
    const {originalname, path: tmpPath} = req.file
    // 文件后缀
    const extname = path.extname(originalname).toLowerCase()

    if (['.png', '.jpg', '.jpeg', '.gif'].indexOf(extname) !== -1) {
        // minio 中保存的文件名
        const filePath =  `${tmpPath}.${extname}`
        // 获取月份
        const today = new Date()
        const month = today.getMonth() + 1
        const year = today.getFullYear()
        // 重命名文件
        fs.rename(tmpPath, filePath,  err => {
            if (err) return handleError(err, res)
            // 上传指 minio 中
            minioClient.fPutObject("resource", `img/${year}/${month}/${originalname}`, filePath, {
                'Content-Type': `image/${extname.split('.')[1]}`,
            }, async () => {
                await fs.unlink(filePath, function() {})
                res.json({
                    "data": `http://ip/resource/img/${year}/${month}/${originalname}` // 替换 ip
                })
            })
        });
    } else {
        // 删除文件
        fs.unlink(tmpPath, err => {
            if (err) return handleError(err, res);
        })
        res.status(403).contentType("text/plain").end("Only img files are allowed!");
    }
})

app.listen(3002, () => {
    console.log("app listening on port 3002")
})

然后用pm2部署一下就ok了。

我们侦听的是3002端口，实际上有域名的话可以做个转发，这里我就不多讲了。

uPic客户端配置

点击其他字段新增一个Header ：

注意：这里的token字段是在nodejs代码中设置的。

然后验证一下：

并且能够支持截图、剪贴板、文件上传，很完美！