2016-12-06 1 views
0

ich ein Bild-Upload in node.js schreiben, habe ich eine Datei vom Client hochgeladen:node.js Wie kann ich Datei-Uploads zusammenstellen?

<form id="frmImgUpload" 
      enctype="multipart/form-data" 
      action="/uploads/" 
      method="POST"> 
     <input id="btnFile" 
      style="float:right;" 
      type="file"/> 
     <input id="btnUpload" 
      style="float:right;" 
      type="button" 
      value="Upload"/> 
    </form> 

Der Code den Upload auszuführen:

$("#btnUpload").click(function() { 
     $("#btnFile").attr("name", strCompanyKey);      
     $("#frmImgUpload").submit(); 
    }); 

Auf dem Server I angezeigt haben die Daten (nur ein kleiner Ausschnitt):

[ '------WebKitFormBoundaryI206ASCJdnqVyOo0\r\nContent-Disposition: form-data; name="syberdyne"; filename="simonplatten.png"\r\nContent-Type: image/png\r\n\r\n�PNG\r\n\u001a\n\u0000\u0000\u0000\rIHDR\u0000\u0000\u0000�\u0000\u0000\u0000l\b\u0006\u0000\u0000\u0000Ԃ\b�\u0000\u0000\u0000\tpHYs\u0000\u0000\u000b\u0013\u0000\u0000\u000b\u0013\u0001\u0000��\u0018\u0000\u0000\nOiCCPPhotoshop ICC profile\u0000\u0000xڝSgTS�\u0016=���BK���KoR\u0015\b RB��\u0014�', 
    '*!\t\u0010J���\u0015Q�\u0011EE\u0004\u001bȠ�\u0003����\u0015Q,\f�\n�\u0007����������{�kּ������>������\u0007�\b\f�H3Q5�\f�B\u001e\u0011�������[email protected]�\n$p\u0000\u0010\b�d!s�#\u0001\u0000�<<+"�\u0007�\u0000\u0001x�\u000b\b\u0000�M��0\u001c��\u000f�B�\\\u0001��\u0001�t�8K\b�\u0014\[email protected]�B�\[email protected]\u0001���', 

Was würde ich zu tun ist, diese Daten in die ursprüngliche Datei wieder zusammenzusetzen. Sind das irgendwelche APIs oder Tutorials, die mir helfen, dies zu erreichen?

ich den Inhalt geteilt habe von dem Client empfangen:

var strBody = ""; 
    request.on("data", function(chunk) { 
     strBody += chunk; 
    }); 
    request.on("end", function() { 
     console.dir(strBody.split("\r\n")); 
    }); 

Daraus ergibt sich:

[ '------WebKitFormBoundarynBkMCKI8RBvIReTF', 
     'Content-Disposition: form-data; name="syberdyne";filename="simonplatten.png"','Content-Type: image/png','','�PNG','\u001a\n\u0000\u0000\u0000\rIHDR\u0000\u0000\u0000�\u0000\u0000\u0000l\b\u0006\u0000\u0000\u0000Ԃ\b�\u0000\u0000\u0000\tpHYs\u0000\u0000\u000b\u0013\u0000\u0000\u000b\u0013\u0001\u0000��\u0018\u0000\u0000\nOiCCPPhotoshop ICC profile\u0000\u0000xڝSgTS�\u0016=���BK���KoR\u0015\b RB��\u0014�&*!\t\u0010J���\u0015Q�\u0011EE\u0004\u001bȠ�\u0003����\u0015Q,\f�\n�\u0007����������{�kּ������>������\u0007�\b\f�H3Q5�\f�B\u001e\u0011�������[email protected]�001\u0000O��y���7\u0000\u0000\u0000\u0000IEND�B`�', 
     '------WebKitFormBoundarynBkMCKI8RBvIReTF--', 
     '' ] 

Dies ist nur ein Ausschnitt der Daten, es sieht aus wie die binäre Daten codiert ist, irgendwie, gibt es eine Routine, die ich anrufen kann, um es zu entschlüsseln?

Ich habe 'formidable' installiert, was kann ich es analysieren?

+0

https://coligo.io/building-ajax-file-uploader-with-node/ – Ouroborus

+0

@Ouroborus, I Habe formidable heruntergeladen, was analysiere ich, ich benutze nicht express. – SPlatten

+1

Formidable hat [Dokumentation] (https://github.com/felixge/node-formidable/blob/master/Readme.md). Anscheinend übergeben Sie das Anforderungsobjekt und eine Rückruffunktion. Der Rückruf und einige Ereignisse sind verfügbar, damit Sie etwas mit den Formulardaten tun können. Die Ereignisse 'field' und' file' sind wahrscheinlich für Sie von Interesse. – Ouroborus

Antwort

0

Formidable ist "ein node.js Modul zum Parsen von Formulardaten, insbesondere Upload-Datei".

Gemäß seiner documentation übergeben Sie Anforderungen in und ermöglicht Ihnen den Zugriff auf die Formulardaten über eine Callback-Funktion oder durch Ereignisse.

über optionalen Rückruf:

var form = new formidable.IncomingForm(); 

form.parse(req, function(err, fields, files) { 
    // ... 
}); 

Und über Ereignisse:

var form = new formidable.IncomingForm(); 

form.on('error', function(err) { 
    // ... 
}); 

form.on('field', function(name, value) { 
    // ... 
}); 

form.on('file', function(name, file) { 
    // ... 
}); 

form.parse(req); 
+0

Danke, funktioniert gut, außer der hochgeladene Dateiname ist nicht wie ich eingestellt habe, es ist etwas wie "upload_30f582d3347732dd2629b99e91a14b72" in diesem jetzt. – SPlatten

+0

@SPlatten Sie können möglicherweise auf den vom Client bereitgestellten Dateinamen als Attribut 'name' des Dateiobjekts zugreifen, z. B .:' Datei.Name'. – Ouroborus

+0

Ich habe den Dateinamen korrigiert, aber der Dateityp ist immer noch falsch. – SPlatten

3

könnten Sie multer Paket verwenden: https://www.npmjs.com/package/multer

Multer fügt einen Körper Objekt und eine Datei oder Objekt-Dateien auf das Request-Objekt. Das Körperobjekt enthält die Werte der Textfelder des Formulars, das Datei- oder Dateiobjekt enthält die über das Formular hochgeladenen Dateien.

Beispiel:

var express = require('express') 
var multer = require('multer') 
var upload = multer({ dest: 'uploads/' }) 

var app = express() 

app.post('/profile', upload.single('avatar'), function (req, res, next) { 
    // req.file is the `avatar` file 
    // req.body will hold the text fields, if there were any 
}) 
+0

Es sieht so aus, als würdest du 'multter' für die Veröffentlichung vom Server zu sich selbst verwenden, wie hilft das bei der Dekodierung der empfangenen Daten? – SPlatten

+0

Sie haben die Datei auf Ihrem Server gespeichert - z. in 'uploads'-Verzeichnis, und Sie könnten es von dort mit fs lesen.readFile –

+0

Das ist nicht was ich will, ich möchte, dass die Clients in der Lage sind, eine Datei auszuwählen und auf den Server hochzuladen, dann speichert der Server sie im lokalen Dateisystem. – SPlatten

Verwandte Themen