学习 nodejs multer 模块(实现图片上传)
最编程
2024-03-02 22:42:03
...
1. 介绍
在学习他之前先要知道他是做什么的
Multer 是一个 node.js 中间件,用于处理 multipart/form-data 类型的表单数据,它主要用于上传文件。
注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据。
以上是官方给出的描述,总而言之就是处理前端发送的表单数据,将数据处理后存储到固定的文件夹, 或者数据库。
2. 安装
npm install --save multer
一般是需要配合fs一起使用的,要实现文件的读写操作
npm install --save fs
3. 使用
1. 首先前端发送请求
官方提醒:不要忘记表单中的enctype=“multipart/form-data”。(限制文件类型,不是form-data么有办法处理)
<form action="/profile" method="post" enctype="multipart/form-data">
<input type="file" name="avatar" />
</form>
<!--multipart/form-data 。 指定传输数据为二进制类型,比如图片、mp3、文件。 -->
2. node接收并处理请求
1. 文件信息
后台能接收到一个file,每个文件具有下面的信息 :
Key | Description | Note |
---|---|---|
fieldname | Field name 由表单指定 | |
originalname | 用户计算机上的文件的名称 | |
encoding | 文件编码 | |
mimetype | 文件的 MIME 类型 | |
size | 文件大小(字节单位) | |
destination | 保存路径 | DiskStorage |
filename | 保存在 destination 中的文件名 | DiskStorage |
path | 已上传文件的完整路径 | DiskStorage |
buffer | 一个存放了整个文件的 Buffer | MemoryStorage |
2. 先列举一个最简单的处理:
let express = require('express')
let app = express()
let upload = multer({ dest: './uploads/' })
let app = express()
// 注意这里upload.single('avatar')里面的参数要与前端请求的input中的name相同
app.post('/profile', upload.single('avatar'), function (req, res, next) {
// req.file 是 `avatar` 文件的信息
// req.body 将具有文本域数据,如果存在的话
})
Multer() 接受一个 options 对象,其中最基本的是 dest 属性,这将告诉 Multer 将上传文件保存在哪。
如果你省略 options 对象,这些文件将保存在内存中,永远不会写入磁盘。
执行之后就能将上传的文件存放在当前目录的uploads文件夹里面,但是没有文件后缀,并且文件名也是乱的。
3. 我们再使用磁盘存储引擎 (DiskStorage)对其进行优化:
let express = require('express')
let { join } = require('path')
let multer = require('multer')
let fs = require('fs');
let app = express();
app.use(express.static(join(__dirname, 'public')))
// 1. 打开或创建一个名字叫folder文件夹
let createFolder = function(folder) {
try {
fs.accessSync(folder); // 打开文件夹
} catch (e) {
fs.mkdirSync(folder); // 创建文件夹
}
};
let uploadFolder = './upload/'; // 设定存储文件夹为当前目录下的 /upload 文件夹
createFolder(uploadFolder);
// 2. 设置磁盘存贮
let storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, uploadFolder); // 他会放在当前目录下的 /upload 文件夹下(没有该文件夹,就新建一个)
},
filename: function(req, file, cb) { // 在这里设定文件名
cb(null, file.originalname); // file.originalname是将文件名设置为上传时的文件名,file中携带的
// cb(null, Date.now() + '-' + file.originalname) // 加上Date.now()可以避免命名重复
}
})
let upload = multer({ storage: storage });
app.post('/upload', upload.single('upload'), function(req, res, next) {
res.send("success");
next();
});
diskStorage有两个选项可用:destination 和 filename。他们都是用来确定文件存储位置的函数。
let upload = multer({ storage: storage })
multer() 的参数传入变成{ storage: storage }
参考文档:官方中文文档