multipart Datei-Uploads mit NodeJS

Question

Ich habe Probleme beim Hochladen von Dateien, um mit NodeJS zu arbeiten. Ich verwende Dropzone.JS ein Formular zu erstellen, die eine POST-Anforderung an/sendet Datei-Upload hier:

<form action="/file-upload" class="dropzone dragndrop" id="my-awesome-dropzone"></form> 

Dann habe ich eine Route in app.js:

app.post('/file-upload', routes.upload); 

Dann ist mein Handler:

exports.upload = function(req, res){ 
    console.log(req.files); 
    res.send("OK"); 
} 

Allerdings wird die Upload-Funktion hier nie aufgerufen. Der Server stürzt mit diesem Fehler zuerst:

events.js:69 
     throw arguments[1]; // Unhandled 'error' event 
        ^
Error: Invalid data 
    at WriteStream._write (fs.js:1616:31) 
    at onwrite (_stream_writable.js:265:14) 
    at WritableState.onwrite (_stream_writable.js:94:5) 
    at fs.js:1628:5 
    at Object.wrapper [as oncomplete] (fs.js:475:5) 
    at process._makeCallback (node.js:321:24) 

So sicher, ich bin nicht, was ich tun soll, weil es scheint, dass dies nicht meine Schuld ist. Ich folgte anderen Tutorials und sah nichts falsch. Auch, wenn ich mein Netzwerk unter Chrom Entwickler-Tools überprüfen, zeigt es:

Request URL:http://localhost:3000/file-upload 
**Request Headers** 
Accept:application/json 
Cache-Control:no-cache 
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryMmLSkbfQskfIcjfE 
Origin:http://localhost:3000 
Pragma:no-cache 
Referer:http://localhost:3000/ 
User-Agent:Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17 
X-File-Name:Screenshot from 2013-03-20 12:23:42.png 
X-Requested-With:XMLHttpRequest 
**Request Payload** 
------WebKitFormBoundaryMmLSkbfQskfIcjfE 
Content-Disposition: form-data; name="file"; filename="Screenshot from 2013-03-20 12:23:42.png" 
Content-Type: image/png 


------WebKitFormBoundaryMmLSkbfQskfIcjfE-- 

Answer 1

@ user568109 und @ Nick-Fishman sind korrekt; Sie sollten dafür die Middleware bodyParser verwenden.

Bitte beachten Sie den Beispielcode für ein einfaches Datei-Upload-Formular unten. (Anmerkung: Sie müssen eine "uploads" Verzeichnis erstellen, um die Dateien zu speichern.)

Datei-upload.js:

var express = require("express"),                 
    app = express();                    

// tell express to use the bodyParser middleware             
// and set upload directory                  
app.use(express.bodyParser({ keepExtensions: true, uploadDir: "uploads" }));      
app.engine('jade', require('jade').__express);             

app.post("/upload", function (request, response) {            
    // request.files will contain the uploaded file(s),           
    // keyed by the input name (in this case, "file")            

    // show the uploaded file name                
    console.log("file name", request.files.file.name);           
    console.log("file path", request.files.file.path);           

    response.end("upload complete");                
});                        

// render file upload form                  
app.get("/", function (request, response) {              
    response.render("upload_form.jade");               
});                        

app.listen(3000); 

views/upload_form.jade:

doctype 5 
html 
    head 
     title Upload Form 
    body 
     h1 Upload File 
     form(method="POST", action="/upload", enctype="multipart/form-data") 
      input(type="file", name="file") 
      input(type="submit") 

Answer 2

@ user568109 ist richtig: Sie müssen Express.js und bodyParser aktiviert. Haben Sie in Ihrer Konfiguration eine Zeile ähnlich der folgenden?

Answer 3

Verwenden Sie busboy-body-parser, um die Anfrage-Body-Parameter und die Dateien abzurufen.

start.js 
var bodyParser = require('body-parser'); 
var busboyBodyParser = require('busboy-body-parser'); 


// parse application/x-www-form-urlencoded 
app.use(bodyParser.urlencoded({ 
    extended: true 
})); 

// parse application/json 
app.use(bodyParser.json()); 


//parse multipart/form-data  
app.use(busboyBodyParser()); 



controllers/someController.js 
someAction: function(req,res){ 
    if(req.method == "POST"){ 
      res.end(JSON.stringify(req.body)+JSON.stringify(req.files)); 
    } 
} 
//{"text":"testx"}{"anexo":{"data":{"type":"Buffer","data":.... }}} 
//req.body = {"text":"testx"} 
//req.files = {"anexo":{"data":{"type":"Buffer","data":.... }}} 


views/someController/someAction.html 
<form method="post" id="multipart" enctype="multipart/form-data"> 
    <input type="text" id="text1" name="text" value="testx" /> 
    <input type="file" id="anexo" name="anexo" /> 
    <input type="submit" value="Enviar" /> 
</form> 

Um eine Datei hochgeladen hat, zu erstellen Sie, wenn der Strom benötigen arbeiten, zum Beispiel:

/* file props 
{ 
    "data":{"type":"Buffer","data":.... }, 
    "fieldname":"anexo", 
    "originalname":"images (1).jpg", 
    "encoding":"7bit", 
    "mimetype":"image/jpeg", 
    "destination":"c:\\live\\sources\\uploads\\", 
    "filename":"eventclock_images(1)_1443706175833.jpg", 
    "path":"c:\\live\\sources\\uploads\\eventclock_images(1)_1443706175833.jpg", 
    "size":9986 
} 
*/ 

var fileStream = fs.createWriteStream(file.path); 
fileStream.write(file.data); 
fileStream.end(); 

fileStream.on('error', function (err) { 
    //console.log("error",err); 
}); 
fileStream.on('finish', function (res) { 
    //console.log("finish",res); 
});