Ich benutze Body-Parser mit formidable

Question

Ich versuche derzeit formidable hinzufügen, damit ich Formulare behandeln kann, die auch Dateien (Bilder, tatsächlich), die hochgeladen werden, habe ich gelesen, Kommentare, dass beide Module nicht zusammen aber funktionieren können this Kommentar hier zeigt, dass beide zusammenarbeiten.

Dies ist der Code, wo ich versuchen, das Formular

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); 
}); 

Und das sind alle Abhängigkeiten I

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()); 

Dies ist haben zu handhaben, was aktuell ist, wenn ich Form gezeigt wird, anmelden, bevor

Parsen

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: [] } 

Form:

<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> 

Aber danach Parse nicht zu laufen scheint, ist weder der console.log

Answer 1

beide Module [body-Parser und formidable] nicht

zusammenarbeiten

gezeigt Aber funktioniert :) Ich benutze sie zusammen.

Auf serverseitige

// 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); 
      ... 
     }); 
    }); 
} 

Auf Client

<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) { 
     ... 
    } 
});