Question

我启动并运行了一个trival Web应用程序，其中用例是与单个表单进行交互：

在输入中输入文字
选中一个单选按钮
上传文件

服务器处理文件上传，并保存到目录。

但是，当涉及从请求正文中提取数据时，我遇到了问题，即“无法选择属性”错误。

我正在使用Express，Bodyparser和Multer中间件。请在下面找到源代码

    var express     = require('express'),
    bodyParser  = require('body-parser'),
    multer      = require('multer'),
    MongoClient = require('mongodb').MongoClient,
    assert      = require('assert'),
    formidable  = require('express-formidable');

    //var multipart = require('connect-multiparty');

var app = express();

//app.use(bodyParser.urlencoded({extended: true}));
//app.use(bodyParser.json());

                    //app.use(formidable.parse());

//app.use(multer);

//app.use(require('connect').bodyParser());
//app.use(bodyParser.json()); // to support JSON bodies
//app.use(bodyParser.urlencoded({ extended: true })); // to support URL-encoded bodies

//app.use(bodyParser.json());         
//app.use(bodyParser.urlencoded({ extended: true }));                                



//  -------------------------------------------------

// file storage - multer.
var storage =   multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  },
  filename: function (req, file, callback) {
    // save the file name with date and CAT_TYPE, not cat type is not operative.
    callback(null, file.fieldname + '-' + Date.now() + 'CAT_TYPE');
  }
});


var upload = multer({ storage : storage}).single('userPhoto');

//  -------------------------------------------------

// handle post data - file upload and get.cat
app.post('/upload', function(req,res){

    console.log("request to upload image recevied . . .");
    console.log("upload in progress . . .");
    console.log("upload complete . . .");


    console.log("req.catype() = " + req.cat);
   console.log("req.catype() = " + req.body.cat);
   console.log("req.catype() = " + req.body.filename);

    // handle file persistence to disk.
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });

});

app.post("/", function (req, res) {
    console.log(req.body.user.name)
});


app.get('/',function(req,res){
      res.sendFile(__dirname + "/index.html");
});

app.get('/hello',function(req,res){
      res.sendFile(__dirname + "/hello.html");
});   

var listener = app.listen(3000, function(){
    console.log('listening on port ' + listener.address().port);
});

<head>
    <script src="js/blueimp-gallery.min.js" async></script>
    <script src="js/bootstrap.min.js" async></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" async></script>
    <script src="js/script.js" async></script>
    <link rel="stylesheet" href="css/blueimp-gallery.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>


    <div id="main">
        <div class="navbar-wrapper" style="border: 12px solid black;">
            <ul>
                <li><a href="#">Login</a></li>
                <li><a href="#">Sign up</a></li>
            </ul>
        </div>

        <div>
            <form 
                    id              =  "uploadForm"
                    enctype         =  "multipart/form-data"
                    action          =  "/upload"
                    method          =  "post">

                <input type="file" name="userPhoto" />
                <input type="submit" value="Upload Image" name="submit">

                <label>filename</label>
                <input type="text" value="input filename here" name="filename">

                <label>travel</label>
                <input type="radio" value="travel" name="cat">
                <label>food</label>
                <input type="radio" value="food" name="cat">
                <label>community</label>
                <input type="radio" value="community" name="cat">
            </form>
        </div>


        <br>
        <br>
        <br>
        <br>
        </div>
    </div>


    <div id="filter">
        <p>filter by content here.</p>

    </div>


</body>

Answer 1

简而言之：在文件数据和表单字段的情况下，bodyparser和multer无法处理多部分上传处理。这是可以使用其他中间件实现的（我已成功使用强大的工作）

使用Express和Node

1 个答案: