express学习笔记:multer中间件处理文件上传

学习笔记
, ,

Image result for upload

前面我们用body-parser中间件实现了解析post方式提交的数据。但是body-parser无法实现上传文件的功能。我们可以尝试一下：

1
2
3
4
<form action="http://localhost:9000" method="post" >
  <input type="file" name="file">
  <input type="submit" name="" value="上传">
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const express = require("express");
const bodyParser = require("body-parser");

let server = express();
server.use(bodyParser.urlencoded({
  extended: true
}))
server.use('/', (req, res) => {
  console.log(req.body);
  res.end("hello");
})

server.listen(9000, () => {
  console.log("server running at 9000");
})

比如我上传一张图片：

image-20180813173728565

后台的输出：

image-20180813173803355

body-parser只解析出了文件的文件名。

这是因为表达数据在提交的时候，会对表单数据进行编码。编码格式在form标签里设置。设置编码方式的属性是enctype， 默认的编码方式是application/x-www-form-urlencoded，就是我们现在采用的方式。

除此之外，还有其他编码方式：

  • text/plain 将空格转换为+，但不对特殊字符编码
  • multipart/form-data 不对字符编码

在上次文件时，必须使用multipart/form-data进行编码。

body-parser中间件则是用于解析格式是application/x-www-form-urlencoded的文件。要解析multipart/form-data文件则需要用到multer中间件。

1
2
3
4
<form action="http://localhost:9000" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" name="" value="上传">
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const express = require("express");
const multer = require("multer");

let server = express();
let upload = multer({dest: 'resource/'});  // 需要给multer定义一个上传路径(文件夹)

server.use(upload.any());
server.use('/', (req, res) => {
  console.log(req.files);
  res.end("hello");
})
server.listen(9000, () => {
  console.log("server running at 9000");
})

此时再上传文件，终端就会输出文件的相关信息：

image-20180813204859172

同时，resource文件夹中还多出了一个文件：

image-20180813204924967

文件以Buffer的形式储存。

我们还可以将文件发送给浏览器，让浏览器读出来：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const express = require("express");
const multer = require("multer");
const fs = require("fs");

let server = express();
let upload = multer({dest: 'resource/'});

server.use(upload.any());
server.use('/', (req, res) => {
  fs.readFile(req.files[0].path, (err, data) => {
    res.end(data);
  })
})

server.listen(9000, () => {
  console.log("server running at 9000");
})

我们再次上传图片，浏览器中就会把图片显示出来：

image-20180813212458833