Fork me on GitHub

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

多文件上传(一)

上文,仍在upload-demo目录下

初始化以及依赖过程略去

新建app2.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.array(fieldname,maxCount)获取上传的多个文件,其中:
* fieldname为上传时文件name属性,
* maxCount为最多可以上传的文件数
*/
app.post('/upload-multiple', upload.array('tux', 4), function(req, res, next) {
const files = req.files
log(files)
res.send(files.length + '个文件已上传');
})
app.get('/', function(req, res, next) {
res.sendFile(__dirname + '/index2.html')
})

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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="tux">
<br>
<input type="file" name="tux">
<br>
<input type="file" name="tux">
<br>
<input type="file" name="tux">
<br>
<input type="submit" value="提交">
</form>
</body>
</html>

项目目录

项目目录

运行项目

nodemon app2.js

实际结果

访问http://localhost:3000

访问

选取多个文件上传

上传

上传成功

案例

控制台输出

控制台

uploads目录变化

uploads目录变化

注意:

  • 多个文件自然包括一个
  • 上传后文件无后缀,不知类型