Hochladen mehrerer Dateien mit Knoten, Multer, Express

Question

Ich versuche, mehrere Dateien mit multer hochladen. Ich habe drei Eingabefelder und einen Upload-Button, um drei Dateien gleichzeitig hochzuladen.
Gemäß der Client-Anforderung muss der Benutzer jeweils eine Datei auswählen und nach der Auswahl von drei Dateien kann der Benutzer alle Dateien auf einmal hochladen.

HTML

<div ng-show="role == '1'" class="col-sm-4 col-md-4 form-group"> 
    <label for="basic-url">Upload Your Image (Passport Size)</label> 
    <input type="file" class="form-control" file-model="file.upload" name="myFile" onchange="angular.element(this).scope().photoChanged(this.files)"></label> 
    <input type="submit" class="btn btn-primary" ng-click="Submit('customerimage')" value="Upload" > 
</div> 
<div ng-show="role == '1'" class="col-sm-4 col-md-4 form-group">      
    <label for="basic-url">Upload Pan Card image</label> 
    <input type="file" class="form-control" file-model="file.upload" name="myFile" onchange="angular.element(this).scope().photoChanged(this.files)"></label> 
    <input type="submit" class="btn btn-primary" ng-click="Submit('pancardimage')" value="Upload" > 
</div> 
<div ng-show="role == '1'" class="col-sm-4 col-md-4 form-group">     
    <label for="basic-url">Upload Bank Passbook image</label> 
    <input type="file" class="form-control" file-model="file.upload" name="myFile" onchange="angular.element(this).scope().photoChanged(thi`enter code here`s.files)"></label> 
    <input type="submit" class="btn btn-primary" ng-click="Submit('bankimage')" value="Upload" > 
</div> 

Server.js

var multer=require('multer'); 
var storage = multer.diskStorage({ 
      destination: function (req, file, cb) { 
      cb(null, 'public/uploads/images/'); 
      }, 
      filename: function (req, file, cb) { 
       if(! file.originalname.match(/\.(jpeg|jpg|png|JPEG|JPG|PNG)$/)){ 

        var err=new Error(); 
        err.code="filetype"; 
        return cb(err); 
       }else{ 
        cb(null,Date.now() + '_' + file.originalname); 
       } 

      //cb(null, file.fieldname + '-' + Date.now()); 
      } 
    }); 
var upload = multer({ storage: storage }).single('myFile'); 
app.post('/upload', function (req, res) { 
     upload(req, res, function (err) { 
       console.log(req.file); 

     if (err) { 
      if(err.code=='LIMIT_FILE_SIZE'){ 
       res.json({success:false,message:'file is tool arge'}); 
      }else if(err.code=='filetype'){ 
       res.json({success:false,message:'file type is invalid'}); 
      }else{ 

       res.json({success:false,message:'file is not selected'}); 
      } 
     } 
     else{ 
      if(!req.file){ 
       res.json({success:false,message:'no file selected'}); 
      } 
      else{ 
      console.log(req.file); 
       res.json({success:true,message: req.file}); 
      } 
     } 

     // Everything went fine 
     }); 
    }); 

-Controller

Richtlinie

app.directive("fileModel",['$parse',function($parse){ 
     return{ 
       restrict:"A", 
       link:function(scope,element,attrs){ 
        var parsedFile=$parse(attrs.fileModel); 
        var parsedFileSetter=parsedFile.assign; 

        element.bind('change',function(){ 
         scope.$apply(function(){ 
          parsedFileSetter(scope,element[0].files[0]); 

         }); 
        }); 
       } 
     }; 

}]); 

Dienst

//var app = angular.module('MLMApp',[]); 
app.service("uploadFile",function($http){ 
     this.upload=function(file){ 
      var fd=new FormData(); 
      fd.append('myFile',file.upload); 
      return $http.post('/upload',fd,{ 
       transformRequest:angular.identity, 
       headers:{'Content-Type':undefined} 
       //headers:{'Content-Type':'multipart/form-data} 
      }); 
     }; 
}); 

Answer 1

Sie sollten jede Ihrer Eingabefelder in das Formular anhängen, bevor es zu einem Middleware übergeben.

Ich sehe, dass alle 3 Ihrer Eingaben das gleiche Datei-Modell verwenden, ich bin mir nicht sicher, ob dies ein Array erstellt oder einander überschreibt. Aber Sie könnten versuchen, die folgenden

versuchen, dies im Fall von Array:

service.uploadFile = function(file){ 
    var fd = new FormData(); 
    for(var i = 0; i < file.upload.length; i++){ 
     fd.append('myFile', file.upload[i]); 
    } 
    return $http.post('/upload',fd,{ 
     transformRequest: angular.identity, 
     headers: { 'Content-Type': undefined } 
    }); 
} 

In dem Fall, dass sie sich gegenseitig überschreiben, versuchen Sie dies:

service.uploadFile = function(file){ 
    var fd = new FormData(); 

    fd.append('image1', file.upload1); 
    fd.append('image2', file.upload2); 
    fd.append('image3', file.upload3); 

    return $http.post('/upload',fd,{ 
     transformRequest: angular.identity, 
     headers: { 'Content-Type': undefined } 
    }); 
}