无法使用multer从req对象访问req.files

我正尝试使用NodeJs脚本将file upload到服务器。 我正在尝试以下的事情。

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>

指示 

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

调节器 

 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编码 

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

当我试图在控制台中看到request.files时，它显示空白数组， request.body作为空白对象。 但在客户端日志中，当我打印$scope.log它显示了适当的内容，并且在通过FormDatavariables进行迭代时，我正在看到我正在发送的所需数据。 另外，在我打印{{log}}时，html文件数据没有被填充。

任何types的帮助是值得欢迎的。

谢谢。

给一个名称forms和访问req.file（“文件名”）

你必须添加标题'Content-type': 'multipart/form-data' 。

使用req.files[0]因为您的服务器代码中有upload.any('inputFile') 。

Interesting Posts