使用multer上傳文件，錯誤：意外的域

Question

我使用multer從窗體上傳圖像。但上傳圖片後，我收到意外的字段錯誤。在我的HTML我是我給文件和文件模型名稱myFile。

app.js

var express = require('express'); 
var bodyParser = require('body-parser'); 
var bodyParser = require('body-parser'); 
var multer = require('multer'); 

    http = require("http"), 
    fs = require('fs'), 
    cors = require('cors'); 

process.on('uncaughtException', function(err) { 
    console.log('Caught exception: ' + err); 
}); 


var app = express(); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({extended: true})); 

// cross origin: 
app.all('*', function(req, res, next) { 
    res.header('Access-Control-Allow-Origin', '*'); 
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS'); 
    res.header('Access-Control-Allow-Headers', 'Content-Type'); 
    next(); 
}); 
// end of cross 

var config = require("./app/config.js")(); 

//Folder config. 
app.use(express.static(__dirname + '/app/public/')); 
app.use(express.static(__dirname + '/app/public/app/')); 

app.get('/', function(req, res) { 
    res.sendfile('index.html'); 
}); 

var upload = multer({ dest: 'uploads/' }) 
app.post('/upload',upload.single('myFile'), function(req,res){ 
console.log(req.files); 
}) 
http.createServer(app).listen(config.port, function() { 
    console.log("WDC server listening on port " + config.port + " in " + config.mode + " mode"); 
    console.log("http://localhost:" + config.port); 
}); 

​​

angular.module('myApp').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]); 
       }); 
       }); 
      } 
     }; 
    }]); 

service

 angular.module('myApp').service('fileUpload', ['$http', function ($http) { 
     this.uploadFileToUrl = function(file, uploadUrl){ 
      var fd = new FormData(); 
      fd.append('file', file); 

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

      .success(function(){ 
      }) 

      .error(function(){ 
      }); 
     } 
    }]); 

controller

angular.module('myApp') 
    .controller('ContactCtrl',['$scope', 'fileUpload', '$http', '$mdToast', '$animate', 
    function($scope, fileUpload, $http, $mdToast, $animate){ 

    $scope.toastPosition = { 
     bottom: true, 
     top: false, 
     left: false, 
     right: true 
    }; 


    $scope.getToastPosition = function() { 
     return Object.keys($scope.toastPosition) 
      .filter(function(pos) { return $scope.toastPosition[pos]; }) 
      .join(' '); 
    }; 

     $scope.uploadFile = function(){ 
      var file = $scope.myFile; 

      console.log('file is '); 
      console.dir(file); 
      if(typeof file === 'undefined' || file === null){ 
      $mdToast.show(
       $mdToast.simple() 
       .textContent('file not found') 
       .position($scope.getToastPosition()) 
       .hideDelay(5000) 
      ); 
      } 
      else{ 
      $mdToast.show(
       $mdToast.simple() 
       .textContent('file uploaded Sucessfully') 
       .position($scope.getToastPosition()) 
       .hideDelay(5000) 
      ); 
      } 

      var uploadUrl = '/upload'; 
      fileUpload.uploadFileToUrl(file, uploadUrl); 

     }; 

Answer 1

在客戶端，你要提交一個名爲file文件域，但在服務器上，你期待一個文件場命名爲myFile。改變一個或另一個，它應該工作。