Node-本地图片存储接口
Node-本地图片存储接口
1、编写错误中间件
需要编写一个错误中间件，用来抛出错误，防止因为错误而造成接口崩溃
注意：错误中间件一定要放在所有路由之后
（1） 在所有路由之后放置中间件
app.use((err, req, res, next) => {
// 如果错误是由token解析失败导致的
if (err.name === 'UnauthorizedError') {
return res.send({
status: 401,
message: '无效的token'
})
}
// 如果是其他位置原因导致的错误
res.send({
status: 500,
message: '未知的错误'
})
next()
})（2）我们请求本地的接口尝试
http://localhost:8888/api/user/5`最后我们输出结果为：
{"code":401,"message":"无效的token"}2、图片存储接口
（1）思路
图片上传方案有三种
- 将图片进行 base64 转码，再保存到数据库
- 利用 multer 库将图片上传到服务器，把图片链接保存到数据库
- 上传到对象存储OSS服务上
第一个方案是最好实现的，只需要将图片进行 base64 转码，再保存到数据库就可以了。但是有个问题，就是如果图片较大，就相当于把几百kb的数据保存到了数据库中，这明显不合理（😷）
第三个方案将上传到对象存储OSS服务上，这个是现在常用的上传方案。但奈何要钱啊，打算后面再去了解一下。
所以打算采用第二种方式来实现。
接下来我们实现一个本地图片上传接口/api/uploadImage
（2）接口（上传接口（本地化方式））
先简单写一个文件上传接口利用Express和multer结合的方式
// 文件上传
const upload = multer({ dest: 'uploads/' });
app.post('/api/upload', upload.single('file'), (req, res) => {
// 获取上传的文件信息
const file = req.file;
console.log('文件传输开始!');
// 如果没有文件
if (!file) {
return res.status(400).send('No file uploaded.');
}else{
res.json({
code: '200',
data: file,
});
}
console.log('文件传输结束!');
// 文件上传成功
// res.send('File uploaded!');
});我们可以看到返回给我们的信息如下所示
{
"code": "200",
"data": {
"fieldname": "file",
"originalname": "xxx.png",
"encoding": "7bit",
"mimetype": "image/png",
"filename": "xxx",
"path": "uploads/xxxxx",
"size": 920
},
"destination": "uploads/"
}{
"fieldname": "file",
"originalname": "äºè§æ.png",
"encoding": "7bit",
"mimetype": "image/png",
"destination": "uploads/",
"filename": "7950ae1ffedebb0087259e6bff0d2a44",
"path": "uploads\\7950ae1ffedebb0087259e6bff0d2a44",
"size": 920
}图片上传成功了，但是很显然跟我们期待的还有区别，还没拿到文件路径和存储进数据库
（3）利用 Express 托管图片静态地址
访问图片的静态地址，需要设置静态文件目录，以便访问上传的头像文件
// 设置静态文件目录，以便访问上传的头像文件
app.use(express.static(path.join(__dirname, 'uploads')));这个时候我们启动却发现__dirname is not defined一直报错这个,分析发现：
在模块中直接使用__dirname，可能会导致错误。可以通过使用import.meta.url来替代__dirname，并使用Node.js的fileURLToPath函数将其转换为本地文件路径。
更正以后我们代码修改为：
import { fileURLToPath } from 'url';
import { dirname, join } from 'path';
const __dirname = dirname(fileURLToPath(import.meta.url));
// 文件上传
const upload = multer({ dest: 'uploads' });
app.post('/api/uploadImage', upload.single('file'), (req, res) => {
console.log('文件传输开始!');
// 获取上传的文件信息
const file = req.file;
// 如果没有文件
if (!file) {
return res.status(400).send('No file uploaded.');
}else{
res.json({
code: '200',
data: file,
path:"http://localhost:${PORT}+/uploads/+req.file.filename",
});
}
console.log('文件传输结束!');
// 文件上传成功
// res.send('File uploaded!');
});结果报错，返回的文件路径错误。
于是我更改了文件更加简单的存储方式：
app.use('/public', express.static('public'));根目录下新建public文件夹，下面随意写一个index.html 文件
关闭我们的token接口认证情况下进行访问：
"http://localhost:8888/public/index.html"这回我们已经可以访问到我们的文件地址：
访问这个地址localhost:8888/public/index.html，然后得到下面的信息：
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>请上传您的文件</title>
<head>
</head>
<body>
我是pubclic-html文件
</body>
</html>（4） 配制接口上传
const upload = multer({dest: 'uploads/',},);
app.post('/api/uploadImage', upload.single('file'), (req, res) => {
// 获取上传的文件信息
const file = req.file;
// 如果没有文件
if (!file) {
return res.status(400).send('No file uploaded.');
}else{
res.json({
code: '200',
data: file,
path:`http://localhost:${PORT}`+'/uploads/'+req.file.filename,
});
}
// 文件上传成功
// res.send('File uploaded!');
});结果我们访问的图片为path: "http://localhost:8888/uploads/3d1b7af686a6fb40fe906e29292dedb7"很明显，这个文件的后缀格式都错误了！
这里有个坑，需要采用设置存储引擎的方式
正确的方式应该这样子
// 设置存储引擎
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
}
});
// 配置Multer
const upload = multer({ storage: storage });
// 设置静态文件路径
app.use(express.static('uploads'));
// 处理文件上传的路由
app.post('/api/uploadImage', upload.single('file'), (req, res) => {
// 获取上传的文件信息
const file = req.file;
// 如果没有文件
if (!file) {
return res.status(400).send('No file uploaded.');
}else{
res.json({
code: '200',
data: file,
path:`http://localhost:${PORT}`+'/uploads/'+req.file.filename,
});
}
console.log('文件传输结束!');
// 文件上传成功
});这个时候我们对发现返回的path路径以及数据进行查看
{
"code": "200",
"data": {
"fieldname": "file",
"originalname": "a-pegBæEp.png",
"encoding": "7bit",
"mimetype": "image/png",
"filename": "file-1714035558736.png",
"path": "http://localhost:8888/uploads/file-1714035558736.png",
"size": 920
},
"destination": "uploads/"
}打开返回的地址我们进行查看
http://localhost:8888/uploads/file-1714035736147.png
这个时候发现给我们返回了一串数据，如下图（这个就是我们想要的数据流）
把地址放置img地址上进行查看，图片已经正常显示：
已经可以正常显示我们的图片
- 点赞
- 收藏
- 关注作者
评论（0）