Express教程04：处理文件上传

[chencl1986]

阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。

使用multer处理文件上传

处理文件上传，自然也离不开中间件的帮助，此处以Multer为例介绍一下文件上传中间件的使用。

但Multer只能处理enctype="multipart/form-data"的form表单提交的数据。

示例代码：/lesson04/server.js

1. 安装Multer：npm install --save multer

2. 引入Multer：

   const multer = require('multer')
   

3. 设置保存上传文件路径：

   const upload = multer({
     dest: './static/upload'
   })
   

4. 处理上传文件：

   server.use(upload.any())
   

5. 接收文件上传结果：

   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 } ]

可以看到表单数据和文件都已经处理完毕。