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

服务

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

控制器

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 的文件字段。改变一个或另一个，它应该可以工作。