2017-01-05 20 views
2

Ich habe viele verfügbare Internet-Tutorials versucht, aber ich kann es immer noch nicht funktionsfähig machen. Ich benutze Multer Modul in NodeJS und ng-Datei-Upload in AngularJS. Ich habe zwei Helfer mit mehreren Einstellungen gemacht (weil ich zwei Szenarien habe und beide Uploads in verschiedene Ordner gehen müssen). Backend-Dateien befinden sich im APP/APP_BACK/-Ordner, also gehe ich im Zielpfad einen Ordner zurück und gebe APP_FRONT/images/header ein. Hier ist ein Helfer-Schnipsel (/helpers/uploadHeader.js):NodeJS & Angular Image hochladen

var storage = multer.diskStorage({ 
destination: function (req, file, callback) { 
    callback(null, '../APP_FRONT/images/header/'); 
}, 
filename: function (req, file, callback) { 
    var ext = filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2); 
    callback(null, file.fieldname + '-' + '.' + ext); 
} 

}); 
var upload = multer(
    {storage: storage} 
); 

var helper = { 
    upload: upload 
}; 

module.exports = helper; 

Hier ist Routerdatei:

var headerHelper= require('../helpers/uploadHeader'); 

router.post('/header', headerHelper.upload.single('header'), function(req, res, next) { 
    headerHelper.upload(req, res, function(err){ 
     if(err){ 
      res.status(400).send(err); 
      console.log(err); 
      return; 
     } 
     res.status(200).send({ code:200, message:'Header upload successful!' }); 
    }); 
}); 

"header" würde Name des Eingabeformular oder Schlüsselwert in Postman sein.

In Angular, I injiziert 'ngFileUpload' -Modul in app und injizierten Service 'Hochladen' in gewünschte Controller und verwendet es in uploadHeader() Funktion, die auf den Knopf innerhalb Form auf client gebunden ist:

$scope.uploadHeader = function (file) { 
     Upload.upload({ 
      url: 'http://localhost:3003/upload/header', 
      method: 'POST', 
      file: file 
     }).then(function (response) { 
      console.log('Success ' + response.config.data.file.name + 'uploaded. Response: ' + response.data); 
     }, function (error) { 
      console.log('Error status: ' + error.status); 
     }, function (evt) { 
      var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
      console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name); 
     }); 

ich habe versucht, mit Postman:

Postman request SS

Und diesen Fehler:

"Fehler: ENOENT: keine solche Datei oder das Verzeichnis, öffnen ' c: \ Benutzer \ Benutzername \ Desktop \ APP \ APP_FRONT \ images \ Headers \ header.jpg '"

Wenn ich von client versuchen, erhalte ich diese Fehler:

"Fehler: Unerwarteter Feld
    bei makeError
" und "Typeerror: DBG ist undefiniert"

ich Google bereits angehört, t Ich habe einige Tutorials gemacht, bin aber dabei geblieben.

+0

"TypeError: dbg ist undefined" ist ein Mozilla Firebug Fehler – AlainIb

+0

würden Sie Ihren 'html' Code zur Verfügung stellen? Ich glaube, da liegt der Fehler. Sind Sie sicher, dass der Wert für das 'name' Attribut' header' ist? –

Antwort

1

In Ihrem Router, sagen Sie Multer zu suchen, ein Objekt namens "Header" in den Multipart-Form Daten. Ihr angularJS-Code fügt es als ein Objekt mit dem Namen 'Datei' hinzu.

Wenn Sie die Zeile in Ihrem Router ändern von:

router.post('/header', headerHelper.upload.single(**'header'**), function(req, res, next) { 
//..... 
    } 

zu:

router.post('/header', headerHelper.upload.single(**'file'**), function(req, res, next) { 
//.... 
} 

Es sollte den Trick tun.

1

EDIT: Lösung gefunden

Eigentlich war es Problem in Dateinamen Funktion in storate Einstellungen des multer. In obigen Beitrag, den beigefügten ich Datetimestamp und Dateierweiterung Feldname:

filename: function (req, file, callback) { 
    var datetimestamp = moment().format('DD-MM-YY_HH:mm:ss'); 
    var filename = file.originalname; 
    var ext = filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2); 

    callback(null, file.fieldname + '-' + datetimestamp + '.' + ext); 
} 

Aus irgendeinem Grund, es nicht Upload beenden konnte, und ich bekam Fehler.

Ich änderte Dateinamen Funktion nur Datei des Originalnamen zurückzukehren:

filename: function (req, file, callback) { 
     callback(null, file.originalname); 
    } 

und jetzt ist alles in Ordnung. Aber jetzt ist die Frage, warum der benutzerdefinierte Dateiname nicht funktioniert?