图片上传详情

最新推荐文章于 2024-10-15 10:16:38 发布

XRTF_

最新推荐文章于 2024-10-15 10:16:38 发布

阅读量43

点赞数

文章标签： node.js

本文链接：https://blog.csdn.net/XRTF_/article/details/135053167

版权

在实际的生产中我们经常需要上传头像等文件的操作，这时候我们可以选择使用 multer 这个中间件来

解决这个问题，下面用上传头像的常见业务来解释 multer 中间件的用法。

技术选型

将图片存入数据库有两种方法：

1. 将图片进行 base64 转码，再保存到数据库（数据库搬家容易，比较安全，但数据库空间的消耗

大，访问会比较缓慢）

2. 利用 multer 库将图片上传到服务器，把图片链接保存到数据库

第一个方案是最好实现的，只需要将图片进行 base64 转码，再保存到数据库就可以了。但是有个问

题，就是如果图片较大，就相当于把几百 kb 的数据保存到了数据库中，这明显不合理 😷

所以本次打算采用第二种方式来实现。

项目初始化

1. 安装依赖

首先创建一个 express-multer-upload 工程项目，然后使用 npm i express 等命令在项目中下好各种依赖

包，

下面是我下载的依赖以及版本。

2. 项目结构划分

本着以比较规范的形式去完成这个项目，所以有必要进行合理的项目结构划分。如下：

由于本次不涉及数据库操作，所以省略了数据库访问层

开启服务，测试接口

1. 开启服务

在 app.js 中编写如下代码：

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
// 创建 app 实例
const app = express()
// 开启跨域支持
app.use(cors())
// 解析表单
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
// * 简单测试接口，后面会删掉
app.get('/', (req, res) => {
res.send('ok')
})
// 开启监听服务
app.listen('3001', () => {
console.log('express serve running at http://localhost:3001');
})

在终端输入 nodemon app.js 命令开启服务，可以看到服务已经跑起来了：

2. 测试接口

可以看到成功的拿到了请求响应的数据

multer上传逻辑

1. multer 配置

在 multer 目录下创建 multerConfig.js ，编写如下代码：

引入依赖

封装处理路径函数

设置 multer 的配置对象

为 multer 添加配置

// 1. 引入依赖
const multer = require('multer')
const path = require('path')
// 2. 封装处理路径函数
const handlePath = (dir) => {
return path.join(__dirname, './', dir)
}
// 3. 设置 multer 的配置对象
const storage = multer.diskStorage({
destination: 'public',
filename (req, file, cb) {
// 将图片名称分割伪数组，用于截取图片的后缀
const fileFormat = file.originalname.split('.')
// 自定义图片名称
cb(null, Date.now() + '.' + fileFormat[fileFormat.length - 1])
}
})
// 4. 为 multer 添加配置
const multerConfig = multer({
storage: storage,
limits: { fileSize: 2 * 1024 * 1024 } // 2M
})
module.exports = multerConfig

在该配置中可以设置文件保存的地址、文件名称、限制上传的文件格式、文件大小

2. upload 上传逻辑

在 multer 目录下创建 upload.js ，编写如下代码：

// 引入配置好的 multerConfig
const multerConfig = require('./multerConfig')
const express = require('express')
const multer = require('multer')
const app = express()
const multerConfig = multer({
storage: multer.diskStorage({
destination: 'public',
filename (req, file, cb) {
// 将图片名称分割伪数组，用于截取图片的后缀
const fileFormat = file.originalname.split('.')
// 自定义图片名称
cb(null, Date.now() + '.' + fileFormat[fileFormat.length - 1])
}
}),
limits: {
fileSize: 2 * 1024 * 1024
}
})
app.post('/upload', multerConfig.single('file'), (req, res) => {
const { filename } = req.file
res.send({
code: 0,
msg: '上传成功!',
data: 'http://127.0.0.1:3001'+filename
})
})
// 启动应用程序并监听端口号3001
app.listen(3001, () => {
console.log('应用程序已启动，监听端口号3000')
})

注意：上面的 multerConfig.single('file') 表示单文件上传，并且字段名为 “file” ，后面上传图片的字段必

须保持一致