这篇文章给大家分享的是个人用自建图床搭建过程。
图床,也就是专门提供存储图片的地方,我们只要通过图床提供的 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 代码中设置的。
然后验证一下:
并且能够支持截图、剪贴板、文件上传,很完美!
Comments