使用身體分析器與強大

Question

我目前正在嘗試添加強大，所以我可以處理形式，也包括上傳的文件（圖像，實際），我讀過評論說，這兩個模塊不能一起工作，但this評論這裏顯示他們兩個一起工作。

這是我嘗試處理表單

router.post("/", middleware.isLoggedIn, function(req, res){ 

var form = new formidable.IncomingForm(); 
console.log(form); 
form.uploadDir = "../img"; 
form.keepExtensions = true; 
form.parse(req, function(err, fields, files) { 
    if(err){ 
     console.log(err); 
    } 
    console.log(fields); 
    console.log(files); 
}); 

代碼，這些都是我

var express = require("express"), 
app = express(), 
bodyParser = require("body-parser"), 
mongo = require("mongoose"), 
User = require("./models/user"), 
passport = require("passport"), 
passportLocal = require("passport-local"), 
indexRoutes = require("./routes/index"), 
commentRoutes = require("./routes/comments"), 
picRoutes = require("./routes/pictures"), 
methodOverride = require("method-override"), 
formidable = require("formidable"); 
app.use(bodyParser.urlencoded({extended: true})); 
app.set("view engine", "ejs"); 
app.use(express.static(__dirname + "/public")); 
app.use(methodOverride("_method")); 
mongo.connect("mongodb://localhost/yelp_camp"); 
app.use(passport.initialize()); 
app.use(passport.session()); 
passport.use(new passportLocal(User.authenticate())); 
passport.serializeUser(User.serializeUser()); 
passport.deserializeUser(User.deserializeUser()); 

這是真實當前顯示什麼，當我解析

之前登錄形式的依賴

IncomingForm { 
domain: null, 
_events: {}, 
_eventsCount: 0, 
_maxListeners: undefined, 
error: null, 
ended: false, 
maxFields: 1000, 
maxFieldsSize: 2097152, 
keepExtensions: false, 
uploadDir: '/tmp', 
encoding: 'utf-8', 
headers: null, 
type: null, 
hash: false, 
multiples: false, 
bytesReceived: null, 
bytesExpected: null, 
_parser: null, 
_flushing: 0, 
_fieldsSize: 0, 
openedFiles: [] } 

形式：

<div class="container"> 
    <div class="row"> 
     <div class="form"> 
      <h1>Add new campground</h1> 
      <form action="/pictures" method="post"> 
       <div class="form-group"> 
        <label for="name">Give a name to your picture</label> 
        <input class="form-control" id="name" type="text" name="campground[name]" placeholder="Name" autofocus required> 
       </div> 
       <div class="form-group" id="linkDiv"> 
        <label for="link">Paste a direct link to your image</label> 
        <input type="radio" id="link" name="method" value="link"><input class="form-control" id="fileLink" type="text" name="campground[image]" placeholder="Image URL"></input></input> 
       </div> 
       <div class="form-group" id="uploadDiv"> 
        <label for="upload">Or upload the picture</label> 
        <input type="radio" id="upload" name="method" value="upload"><input class="form-control" id="fileUpload" type="file" name="image" value="Upload file" disabled></input></input> 
       </div> 
       <div class="form-group"> 
        <label for="description">Add a description to your picture</label> 
        <input class="form-control" id="description" type="text" name="campground[description]" placeholder="Description"> 
       </div> 
       <div class="form-group"> 
        <button class="btn btn-lg btn-primary btn-block">Submit!</button> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

但這似乎解析後不運行，既沒有的console.log的示

Answer 1

兩個模塊[身體解析器和強大]不能一起工作

但作品:)我一起使用它們。

在服務器端

// app.js 
app.use(require('body-parser').urlencoded({extended: false})); 

// inside upload-router function (req, res, next) 
var formidable = require ('formidable'); 
var fs = require('fs'); 

var form = new formidable.IncomingForm(); 
form.uploadDir = '/public/temp/'; 

form.parse(req, function(err, fields, files) { 
    var file = files.file; 
    var target = '/public/temp/' + file.name; 
    fs.rename(file.path, target, function (err) { 
      if (err) 
       return next(err); 
      ... 
     }); 
    }); 
} 

在客戶端

<form id = "upload-form" method = "post" > 
    <input type="file" id = "upload-input" name = "file" required /> 
    <input type = "button" onclick = "ajax...">Upload</input> 
</form> 
... 
$.ajax({ 
    type: 'POST', 
    url: '/upload', 
    data: new FormData($('#upload-form')[0]), 
    enctype: 'multipart/form-data', 
    processData: false, 
    contentType: false, 
    dataType: 'json', 
    success: function (data) { 
     ... 
    } 
});