Fork me on GitHub

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

多文件上传(二)

上文,仍在upload-demo目录下。

新建app3.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const app = require('express')()
const multer = require('multer')
const log = console.log
const upload = multer({ dest: './uploads' }) // 指明上传后文件存放地址为当前目录下uploads文件夹
app.listen(3000)
/**
* 此处采用upload.fields([{name:'fieldname1',maxCount:count1},{name:'fieldname2',maxCount:count2},...])获取上传的多个文件,其中:
* name为上传时文件name属性,
* maxCount为最多可以上传的文件数(可选)
*/
app.post('/upload-multiple', upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'tux', maxCount: 2 }]), function(req, res, next) {
const files = req.files
log(files)
res.send(files.length + '个文件已上传');
})
app.get('/', function(req, res, next) {
res.sendFile(__dirname + '/index3.html')
})

新建index3.html用来多个文件提交上传

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

项目目录

项目目录

运行项目

nodemon app3.js

实际结果

访问http://localhost:3000

访问

选取多个文件上传

上传

上传成功

案例

控制台输出

控制台

uploads目录变化

uploads目录变化

总结:

  • single()适用于单个文件上传
  • array()多用于多个包含相同name属性的文件上传
  • fields()为两种方法的结合,更广泛

注意: 问题

  • 上述三种方法上传的文件均不含有后缀名