node、multer、expressを使用して複数のファイルをアップロードする

Question

multerを使用して複数のファイルをアップロードしようとしています。私は同時に3つのファイルをアップロードするために3つの入力ボックスと1つのアップロードボタンを持っています。
クライアント要件に応じて、一度に1つのファイルを選択し、3つのファイルを選択した後、すべてのファイルを一度にアップロードできます。

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

コントローラ

$scope.file={}; 
    $scope.Submit=function(name){ 
     $scope.name = name; 
     uploadFile.upload($scope.file).then(function(data){ 
      if(data.data.success){ 
       $scope.alert='alert alert-success'; 
       $scope.message=data.data.message; 
       $scope.file={}; 
       $scope.newCustomer[$scope.name] = 'uploads/images/' + data.data.message.filename; 
      }else{ 
       $scope.alert='alert alert-danger'; 
       $scope.message=data.data.message; 
       $scope.file={}; 
      } 
     }); 
    }; 

    $scope.photoChanged=function(files){ 
    if(files.length >0 && files[0].name.match(/\.(jpeg|jpg|png)$/)){ 
     var file=files[0]; 
     var fileReader=new FileReader(); 
      fileReader.readAsDataURL(file); 
     fileReader.onload=function(e){ 
      $timeout(function(){ 
        $scope.thumbnail={}; 
         $scope.thumbnail.dataUrl=e.target.result; 
      }); 
     } 
    } 
    else{ 
     $scope.thumbnail={}; 
     $scope.message=false; 
    } 
}; 

指令

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

         }); 
        }); 
       } 
     }; 

}]); 

サービス

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

あなたのミドルウェアに渡す前に、あなたのフォームにご入力フィールドのそれぞれを追加する必要があります。

あなたの入力のすべてが同じファイルモデルを使用していることがわかります。これが配列を作成するか、お互いを上書きするかわかりません。しかし、あなたは以下の

が配列の場合にはこれを試してみてください可能性：彼らはお互いを上書きする場合は

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

、これを試してみてください。

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