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