Fork me on GitHub

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

单上传文件

先看后做Multer文档

此处省略一万字,自己看文档

创建实例项目文件夹upload-demo

初始化package

cd upload-demo

npm init

安装所需依赖

npm install express multer --save

npm install nodemon -g

新建app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const app = require('express')()
const multer = require('multer')
const log = console.log
// 指明上传后文件存放地址为当前目录下uploads文件夹
const upload = multer({dest:'./uploads'})
app.listen(3000)
app.post('/upload-single',upload.single('avatar'),function(req,res,next){
const file = req.file
log('html中form内的名称:%s', file.fieldname)
log('上传文件的原始名称:%s', file.originalname)
log('文件编码方式:%s', file.encoding)
log('上传文件的MIME类型:%s', file.mimetype)
log('上传文件的字节大小:%d', file.size)
log('上传文件存放的地址:%s', file.destination)
log('文件上传后的名称:%s', file.filename)
log('文件上传后存放地址的全路径:%s', file.path)
res.send('文件已上传');
})
app.get('/', function(req, res, next) {
res.sendFile(__dirname + 'index.html')
})

新建index.html用来提交上传

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

在upload-demo目录下新建uploads目录用于存放上传的文件

项目目录

项目目录

运行项目

nodemon app.js

实际结果

访问http://localhost:3000

访问

选取图片上传

上传

上传成功

案例

控制台输出

控制台输出

uploads目录变化

uploads目录变化

注意: 有一些问题

  • 只上传单个文件
  • 上传后文件无后缀,不知类型。