connect的bodyParser中间件处理文件上传

时间：2022-12-19 07:53:02

使用bodyParser

　　项目路径如下。connect的bodyParser中间件处理文件上传其中static可以修改，但是必须和connect.static( 'static' )对应。
　　本例中，我们可以使用createServer的快捷方式来创建一个服务器，并将所有要用到的中间件都传给它。
　　

var connect = require('connect'); 
var fs = require( 'fs' );

var server = connect(
  connect.static('static'),
  connect.bodyParser(),
  function(req,res,next){
    console.log('----------body------------');
    console.log(req.body);
    console.log("----------files-----------");
    console.log(req.files);
  }
)

或者你喜欢这样的写法：

var connect = require('connect'); 
var fs = require( 'fs' );

var server = connect()
.use( connect.static( 'static' ) )
.use( connect.bodyParser() )
.use( function ( req, res, next ) {
      console.log('----------body------------');
      console.log(req.body);
      console.log("----------files-----------");
      console.log(req.files);
})

不管哪种写法都是可以的。其中connect.static( 'static' )表示挂载根路径 “localhost:3000” 到其子路径 “static” 下，它会自动找到其中的 “index.html” 。也就是我们的表单文件。

文件上传表单

<!-- 这是static下的index.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <body>

      <form action="/" method="POST" enctype="multipart/form-data">
        <input type="file" name="hello" multiple="multiple"/>
        <button>Send files!</button> 
      </form>

    </body>
</html>

　　我打开了表单文件，并且上传了一个”学习报告.txt”文件。打印出”req.body”和”req.file”我们可以看到：
connect的bodyParser中间件处理文件上传

　　其中body对象为空，file对象正是我们上传的这个文件，以对象形式表示。对象的键正是我们设置的input表单的 “name” 。值是一个文件对象。其中有详细参数。size表示文件大小，以B为单位。path是我们上传的文件存放的位置，打开这个位置，可以看到一个相同的文件。（书上用的是req.body.file，是错误的。版本原因？？）

　　在这里，我们使用了connect.bodyParser()。如果去掉这个，我们会发现 “req.body” 和 “req.file” 都是 “undefined” 。

　　好了，文件上传就这么简单，但是我们会发现，一段时间后，浏览器会断开与服务器的连接，因为服务器没有返回相应。为了解决这个问题，我们服务器端更新代码如下。
　　

var connect = require('connect'); 
var fs = require( 'fs' );

var server = connect(
  connect.static('./static'),
  connect.bodyParser(),
  function(req,res,next){
    if ( 'POST'== req.method && req.files ) {
      console.log('----------body------------');
      console.log(req.body);
      console.log("----------files-----------");
      console.log(req.files);
      fs.readFile( req.files.hello.path, 'utf8', function ( err, data ) {
        if ( err ) {
          res.writeHead( 500 );
          res.end( 'Error' );
          return;
        }

        res.writeHead( 200, { 'Content-Type': 'text/html;charset=utf-8' } );
        res.end([
          '<h3>File：' + req.files.hello.name + '</h3>',
          '<h3>Type：' + req.files.hello.type + '</h3>',
          '<h3>File：' + data + '</h3>',
        ].join(''));
      })
    } else {
      next();
    }
  }
)

　　再次运行服务器，打开static下的index.html。选择文件上传，我们可以看到页面就显示了文件的内容（data）。值得说的一点是，尽管我在读文件时设置了utf8编码格式，但是页面上中文仍然乱码。于是又在writeHead中设置了编码，这也才解决了中文乱码问题。

多文件上传

　　由于我们在表单中加上了”multiple”属性。所以支持所文件上传（上述代码是单文件上传，没做多文件兼容处理）。上传多文件时，我们通过”console.log”可以看到：
　　connect的bodyParser中间件处理文件上传
　　每个文件都是一个一个对象，要实现多文件上传，我们是需要找到”hello”这个键，它的值是一个数组，遍历这个数组，对每一个文件进行”readFile”操作即可。

小结

1，bodyParser中间件
2，单/多文件上传

参考

了不起的Node.js

http://www.ithao123.cn/content-39204.html

标签：

相关文章