Fork me on GitHub

Node.js使用multer上传文件(四)

深入multer上传(一)

前面的文章中,上传后文件均没有文件后缀,不知类型。并且,部分代码略显冗长。

multer官方提供了文档供用户定制

指定使用的存储方法:

  • DiskStorage(磁盘存储)
  • MemoryStorage(内存存储)

1.1. 新建app4.js来演示DiskStorage()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const app = require('express')()
const multer = require('multer')
const log = console.log
/**
* destination指定上传的目录
* filename指定上传后的文件名称
*/
const storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, 'uploads')
},
filename: function(req, file, cb) {
cb(null, file.originalname)
}
})
const upload = multer({ storage: storage })
app.listen(3000)
app.post('/upload', upload.single('avatar'), function(req, res, next) {
const file = req.file
log(file)
res.send('文件已上传');
})
app.get('/', function(req, res, next) {
res.sendFile(__dirname + '/index4.html')
})

1.2. 新建index4.html用于上传提交

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传Demo</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="avatar">
<br>
<input type="submit" value="提交">
</form>
</body>
</html>

1.3. 项目目录

项目目录

1.4. 运行项目

nodemon app4.js

1.5. 实际结果

1.5.1 访问http://localhost:3000

访问

1.5.2. 选取多个文件上传

上传

1.5.3. 上传成功

案例

1.5.4. 控制台输出

控制台

1.5.5. uploads目录变化

uploads目录变化

2.1. 新建app5.js来演示MemoryStorage()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const app = require('express')()
const multer = require('multer')
// 引入fs处理buffer文件
const fs = require('fs')
const log = console.log
//采用memorystorage的方式
const storage = multer.memoryStorage()
const upload = multer({ storage: storage })
app.listen(3000)
app.post('/upload', upload.array('avatar', 2), function(req, res, next) {
const files = req.files
log(files)
//从内存中选取上传的第一个文件并写入至uploads目录中
fs.writeFile('uploads/memoryStorage.jpg', files[0]['buffer'], function(err) {
if (err) {
log(err)
}
})
res.send(files.length + '个文件已上传至内存中')
})
app.get('/', function(req, res, next) {
res.sendFile(__dirname + '/index5.html')
})

2.2. 新建index5.html用于提交上传

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MemoryStorage上传Demo</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="avatar">
<br>
<input type="file" name="avatar">
<br>
<input type="submit" value="提交">
</form>
</body>
</html>

2.3. 项目目录

项目目录

2.4. 运行项目

nodemon app5.js

2.5. 实际结果

2.5.1. 访问http://localhost:3000

访问

2.5.2. 选取多个文件上传

上传

2.5.3. 上传成功

案例

2.5.4. 控制台输出

控制台

2.5.5. uploads目录变化

uploads目录变化

注意:

array()fields()的情形类似,不再重复

说明:

  • multer中可以使用req.body接受来自表单的文本域信息
  • 除了提及的三种方法外,还有.none(),any()两种方法,分别表示只接受文本域以及一切形式
  • 上传时文件类型、大小控制以及错误处理还没有涉及