使用 multer 上传文件,错误:意外字段

file upload with multer, Error: Unexpected field

本文关键字:错误 意外 字段 文件 multer 使用      更新时间:2023-09-26

我正在使用 multer 从表单上传图像。 但是上传图像后,我收到意外字段错误。 在我的 HTML 中,我已将文件和文件模型名称作为 myFile。

应用.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);
        };

在客户端,您要提交一个名为 file 的文件字段,但在服务器上,您需要一个名为 myFile 的文件字段。更改一个或另一个,它应该有效。