阅读 132

Express教程04:处理文件上传

阅读更多系列文章请访问我的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 } ]
复制代码

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

关注下面的标签,发现更多相似文章
评论