阅读更多系列文章请访问我的GitHub博客,示例代码请访问这里。
使用multer处理文件上传
处理文件上传,自然也离不开中间件的帮助,此处以Multer为例介绍一下文件上传中间件的使用。
但Multer只能处理enctype="multipart/form-data"
的form表单提交的数据。
示例代码:/lesson04/server.js
-
安装Multer:
npm install --save multer
-
引入Multer:
const multer = require('multer') 复制代码
-
设置保存上传文件路径:
const upload = multer({ dest: './static/upload' }) 复制代码
-
处理上传文件:
server.use(upload.any()) 复制代码
-
接收文件上传结果:
server.post('/upload', (req, res, next) => { console.log(req.files) }) 复制代码
启动服务器后,访问http://localhost:8080/index.html,上传一个文件,就可以看到控制台打印的结果:
[ { fieldname: 'file',
originalname: '091557_Dp1c_3669181.png',
encoding: '7bit',
mimetype: 'image/png',
destination: './static/upload',
filename: '8952900376066f666af68c019ad85993',
path: 'static\\upload\\8952900376066f666af68c019ad85993',
size: 136586 } ]
复制代码
同时可以看到在/lesson04/static/upload
文件夹中,有一个名为8952900376066f666af68c019ad85993
的文件,即为上传的文件。
使用body-parser补充处理数据
Multer的不足之处是无法处理普通表单提交的数据,以及通过Fetch提交的数据,所以需要配合body-parser使用,完整代码如下:
示例代码:/lesson04/server.js
const express = require('express')
const bodyParser = require('body-parser')
const server = express()
server.listen(8080)
// 引入Multer
const multer = require('multer')
// 设置保存上传文件路径
const upload = multer({
dest: './static/upload'
})
// 处理上传文件
server.use(upload.any())
// 处理表单提交,对应请求头application/x-www-form-urlencoded
server.use(bodyParser.urlencoded({
extended: false // 为true时将使用qs库处理数据,通常不需要
}))
// 处理fetch请求,对应请求头application/json
server.use(bodyParser.json())
// 接收文件上传结果
server.post('/upload', (req, res, next) => {
console.log(req.body)
console.log(req.files)
res.send({
error: 0,
data: req.body,
msg: '上传成功'
})
})
server.get('/reg', (req, res, next) => {
console.log(req.query)
res.send({
error: 0,
data: req.query,
msg: '注册成功'
})
})
server.post('/login', (req, res, next) => {
console.log(req.body)
res.send({
error: 0,
data: req.body,
msg: '登陆成功'
})
})
server.use(express.static('./static/'))
console.log(`Server started at 8080`)
复制代码
此时填写表单并上传文件,控制台打印的结果为:
[Object: null prototype] { username: 'test', password: 'test' }
[ { fieldname: 'file',
originalname: '091557_Dp1c_3669181.png',
encoding: '7bit',
mimetype: 'image/png',
destination: './static/upload',
filename: '266005473a95b69207dd145241439db0',
path: 'static\\upload\\266005473a95b69207dd145241439db0',
size: 136586 } ]
复制代码
可以看到表单数据和文件都已经处理完毕。