❤Nodejs 第十二章(图片存储接口-本地)

简介: 【4月更文挑战第12天】在Node.js第十二章中,主要讲解了错误中间件的编写和multer中间件的使用。错误中间件需置于所有路由之后,用于捕获并处理错误,防止接口崩溃。示例代码展示了如何处理token解析失败的错误。接着介绍了multer,它是处理multipart/form-data数据,尤其是用于文件上传的中间件。通过`yarn add --save multer`安装,并引入到项目中。最终,成功实现了图片上传并返回了可访问的图片路径。

❤Nodejs 第十二章

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、node中间件multer的认识安装

multer简介

multer 是一个Node.js中间件,用于处理multipart/form-data类型的数据,主要用于上传文件。它是专门设计来处理文件上传的,非常适合用在像图片上传这样的场景中

官网地址
https://www.npmjs.com/package/multer

安装

yarn add --save multer

引入multer和路径path

// 引入文件上传的包 Node.js中间件,用于处理multipart/form-data类型的数据
import multer from 'multer'
import path from 'path'

3、图片存储接口

(1)思路

图片上传方案有三种

  1. 将图片进行 base64 转码,再保存到数据库
  2. 利用 multer 库将图片上传到服务器,把图片链接保存到数据库
  3. 上传到对象存储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!');
});

我们可以看到返回给我们的信息如下所示

image.png

{
   
    "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

这回我们已经可以访问到我们的文件地址:

image.png

(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路径以及数据进行查看

image.png

打开返回的地址我们进行查看
http://localhost:8888/uploads/file-1714035736147.png

这个时候发现给我们返回了一串数据
image.png

把地址放置img地址上进行查看,图片已经正常显示:

image.png

优化一下,完美使用本地图片接口!

目录
相关文章
|
1月前
|
存储 JavaScript 数据库
nodejs中express框架实现增删改查接口
nodejs中express框架实现增删改查接口
|
9天前
|
SQL JavaScript 前端开发
简单用Nodejs + express 编写接口
【6月更文挑战第3天】该文介绍了如何在Node.js和Express中创建GET和POST接口。首先,简要提到了准备工作,建议查阅上一篇文章。接着展示了GET接口的示例,说明可以直接在浏览器中请求。然后,详细解释了POST接口的步骤,包括引入Express模块、设置路由处理程序、解析请求体及处理请求。最后,强调了编写接口时应注意错误处理、安全性、中间件使用、路由组织、日志记录、性能优化和测试等关键点。作者以肥晨的身份结尾,鼓励关注其分享的前端学习资料和技术动态。
15 1
|
1月前
|
数据可视化 JavaScript NoSQL
搭建接口平台YApi详解(含搭建node环境)
搭建接口平台YApi详解(含搭建node环境)
43 0
|
1月前
|
存储 JavaScript API
❤Nodejs 第十三章(文件上传接口以及token添加)
【4月更文挑战第13天】Nodejs第十三章介绍了文件上传接口和Token添加。使用Multer库处理文件上传,设置存储引擎和静态文件目录,定义上传接口,支持单个文件上传。上传成功返回文件信息和访问路径。为解决静态文件访问需要Token认证的问题,更新expressjwt配置,排除包含uploads的路径,确保静态文件可正常访问。
45 2
|
1月前
|
JavaScript 关系型数据库 MySQL
百度搜索:蓝易云【Node.js写接口连接MySQL数据库教程】
现在,你的Node.js应用已经启动,可以通过访问 `http://localhost:3000/users`来获取所有用户的信息。注意替换上述代码中的数据库连接信息为你自己的实际数据。
57 0
|
1月前
|
JavaScript 前端开发 中间件
Node.js—Express使用、Express 路由 、Express 中间件、托管静态资源、使用 Express 写接口、node.js链接sqlite数据库
Node.js—Express使用、Express 路由 、Express 中间件、托管静态资源、使用 Express 写接口、node.js链接sqlite数据库
146 0
|
1月前
|
前端开发 JavaScript 关系型数据库
【前端必备】使用NodeJs写接口(本地连接MySQL + 连接到云服务MySQL)
【前端必备】使用NodeJs写接口(本地连接MySQL + 连接到云服务MySQL)
151 0
|
1月前
|
JavaScript 内存技术
Node.js 编写接口入门学习(GET、POST)
Node.js 编写接口入门学习(GET、POST)
42 2
|
7月前
|
JSON JavaScript 数据格式
在uni-app项目里使用node服务实现模拟接口
在uni-app项目里使用node服务实现模拟接口
61 1
|
10月前
|
JavaScript API
Node.js学习笔记----使用express编写接口
Node.js学习笔记----使用express编写接口