HTML + Node.js 文件上传答案

【问题标题】：HTML + Node.js File UploadHTML + Node.js 文件上传
【发布时间】：2016-02-14 20:14:48
【问题描述】：

请帮我解决这个问题。 我得到空值作为结果。

HTML 代码

<form method="post" enctype="multipart/form-data" action="/file-upload">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="file" name="thumbnail">
    <input type="submit">
</form>

Node.js

var express = require('express');
var http = require('http');
var request = require('request');
var bodyParser = require('body-parser');    

var app = express();
app.use(express.static(__dirname + '/app/'));

// parse urlencoded request bodies into req.body
app.use(bodyParser.urlencoded({ extended: true }));

var server = app.listen(8080,function(){
 console.log("Node.js image upload");
});

app.post('/file-upload', function(req, res, next) {
 console.log(req.body);
 console.log(req.files);
 res.writeHead(200, {'Content-Type': 'text/plain'});
 res.end('Success\n');
});

【问题讨论】：

标签： javascript html node.js forms file-upload

【解决方案1】：

您可以使用 npm 模块formidable 来提供表单多部分数据。下面是一个例子：

 app.post('/file-upload', function(req, res, next) {
  var form = new formidable.IncomingForm();
  form.parse(req, function(err, fields, files) {
    console.log('form parse');
  });

 form.on('field',function(name,value){
    console.log('in field',name,value);//gives you the field names with value
  });
  form.on('file',function(name,value){
   console.log('in file');
  });

   form.on('end', function(fields, files) {
     this.openedFiles[x].path; //gives the file path
   });
});

【讨论】：

【解决方案2】：

由于表单中的enctype="multipart/form-data"，您遇到了问题。您需要安装 multer 包来处理这些问题。

基本用法是这样的：

//Include the package
var multer  = require('multer');
var uploadTmp = multer({ dest: 'uploads/' });

// Use a middleware to handle files
app.post('/file-upload',uploadTmp.single('thumbnail'), function(req, res, next) {

【讨论】：

【解决方案3】：

body-parser 无法处理多部分/表单数据

您应该使用multer 或busboy 之类的东西

处理 multipart/form-data 需要一些复杂的逻辑，每个处理它的包都有很多设置

【讨论】：