2017-07-31 3 views
2

J'essaye de télécharger un fichier sur le serveur en utilisant le script NodeJs. J'essaie les choses suivantes.Impossible d'accéder à req.files à partir de l'objet req en utilisant multer

HTML

<md-tab label="Upload log"> 
    <md-content class="md-padding" id="popupContainer" ng-cloak> 
     <h4>Upload a zip file</h4> 
      <form ng-submit="$event.preventDefault()"> 
       <md-input-container class="md-block" flex> 
        <label>Source</label> 
        <md-select name="source" ng-model="log.source" ng-click="getSources()"> 
         <md-option ng-repeat="source in sourceInfo" value="{{source.sourceCode}}">{{source.sourceName}}</md-option> 
        </md-select> 
       </md-input-container> 
       <br> 
       <md-input-container class="md-block"> 
        <label>Select Batch</label> 
        <input required type="number" step="any" name="rate" ng-model="log.batch" min="1" max="100"/> 
       </md-input-container> 
       <md-input-container class="md-block"> 
        <label>Enter your comments about the log files</label> 
        <textarea ng-readonly="false" ng-model="log.comment" md-maxlength="100" rows="3" md-select-on-focus></textarea> 
       </md-input-container> 
       <div ng-if="status" id="status"> 
        <b layout="row" layout-align="center center" class="md-padding">{{status}}</b> 
       </div> 
       <input type="file" file-model="log.file" name="inputFile"/> 
       <button ng-click="uploadFiles()">Upload</button> 
       {{log}} 
       <p> </p> 
      </form> 
    </md-content> 
</md-tab> 

directive

var logApp = angular.module('logAnalysisApp', ['ngMaterial', 'lfNgMdFileInput', 'ngRoute', 'ngMessages']); 
logApp.config(['$routeProvider', '$compileProvider', '$mdThemingProvider', function ($routeProvider, $compileProvider, $mdThemingProvider) { 
      $compileProvider.debugInfoEnabled(false); 
      $routeProvider 
      .when('/login', { 
       templateUrl: 'views/login.html', 
       controller: 'loginControl' 
      }) 
      .when('/register', { 
       templateUrl: 'views/register.html', 
       controller: 'registerControl' 
      }) 
      .when('/home', { 
       templateUrl: 'views/filemenu.html', 
       controller: 'fileUploadCtrl' 
      }) 
      .when('/admin', { 
       templateUrl: 'views/adminpanel.html', 
       controller: 'adminCtrl' 
      }) 
      .when('/totalreport', { 
       templateUrl: 'views/total.html', 
       controller: 'totalCtrl' 
      }) 
      .otherwise({ 
       redirectTo: '/login' 
      }); 
     } 
    ]) 

logApp.constant('config', { 
    apiUrl: 'http://localhost:8080', 
    serverUrl: 'http://localhost:3000' 
}) 

logApp.directive('fileModel', ['$parse', function ($parse) { 
      return { 
       restrict: 'A', 
       link: function (scope, element, attrs) { 
        var model = $parse(attrs.fileModel); 
        var modelSetter = model.assign; 

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

Contrôleur

logApp.controller('fileUploadCtrl', function ($rootScope, $scope, $timeout, $location, $http, config) { 
    $scope.log = {}; 
    $scope.uploadFiles = function() { 

     console.log($scope.log); 

     var uploadUrl = "http://localhost:3000/testRef"; 

     var fd = new FormData(); 
     for (var key in $scope.log) 
      fd.append(key, $scope.log[key]); 
     for (var pair of fd.entries()) { 
      console.log(pair[0] + ', ' + pair[1]); 
     } 
     $http.post(uploadUrl, fd, { 
      transformRequest: angular.indentity, 
      headers: { 
       'Content-Type': undefined 
      } 
     }) 
     .success(function() { 
      console.log("success!!"); 
     }) 
     .error(function() { 
      console.log("error!!"); 
     }); 
    }; 
}); 

ServerSide codage

var express = require('express') 
var app = express() 
var multer = require('multer'); 
var upload = multer({ dest: './uploads' }); 
app.post('/testRef', upload.any("inputFile"), function(request, response) { 

    console.log(request.files) 
    console.log(request.body) 
    response.send("Done") 
}); 

Quand j'essaie de voir le request.files dans la console, il montre tableau blanc, et request.body comme un objet vide. Mais dans le journal du client lorsque j'imprime $scope.log il montre le contenu approprié et lors de l'itération à travers la variable FormData je vois les données désirées que j'envoie. En outre, dans le code HTML lorsque j'imprime le {{log}} les données de fichier ne sont pas remplies.

Tout type d'aide est le bienvenu.

Merci.

+0

@kumbhaniBhavesh: Je reçois 'req.body' en tant qu'objet vide. Donc, essayer 'req.body.file' pourrait ne pas aider. –

Répondre

0

donnent un nom à la forme et req.file d'accès (« nom de fichier »)

+0

Il dit, req.file n'est pas une fonction. –

+0

avez-vous donné le nom pour former et accédé request.file ("fileName") –

+0

'

' est mon nouveau formulaire et le code de serveur est ' console.log (request.file ("logInputForm")) ' –

0

Vous devez ajouter 'Content-type': 'multipart/form-data' tête. Utilisez req.files[0] puisque vous avez upload.any('inputFile') dans votre code de serveur.