从Angular应用到Express Web Server的文件提交

File submission from an Angular app to an Express Web Server

本文关键字：Server 文件 提交 Web Express Angular 应用      更新时间：2023-09-26

我试图通过我的HTML表单和运行的Express Web服务器与Angular之间的文件。如果我把Angular从等式中移除，然后用普通的POST方式提交表单，Express就会收到这个文件。

我的形式:

<form ng-submit="addEntry()" enctype="multipart/form-data">
<fieldset>
  <legend>Upload Image</legend>
  <div class="form-group">
    <label>
      mmol/L:
      <input type="number" ng-model="mmol">
    </label>
  </div>
  <div class="form-group">
    <label>
      Carbs:
      <input type="number" ng-model="carbs">
    </label>
  </div>
  <div class="form-group">
    <label>
      Image:
      <input type="file" name="file" file-upload file-changed="setFile(file)">
    </label>
  </div>
  <div class="form-group">
    <button type="submit">Submit</button>
  </div>
</fieldset>

My fileUpload指令:

app.directive('fileUpload', function() {
  return {
    scope: {
      fileChanged: '&'
    },
    link: function(scope, elem, attrs) {
      elem.bind('change', function(event) {
        scope.fileChanged({
          file: event.target.files[0]
        });
      });
    }
  }
});

我的控制器:

$scope.addEntry = function() {
  APIFactory.addEntry($scope.mmol, $scope.carbs, $scope.file);
}

APIFactory: 

app.factory('APIFactory', ['$http', function($http) {
  return {
    addEntry: function(mmol, carbs, file) {
      var reading = {
        mmol: mmol,
        carbs: carbs,
        file: file
      };
      console.log(reading);
      $http({
        method: 'POST',
        url: 'http://localhost:1337/upload',
        data: reading
      }).then(function success(response) {
        console.log(response);
      }, function error(err) {
        console.log(err);
      })
    }
  }
}]);

Express服务器:

app.post('/upload', upload.single('image'), function(req, res) {
  var image = req.file;
  console.log(image);
});

APIFactory中console.log(reading)的结果:

Object {mmol: 10, carbs: 10, file: File}

Express Server中console.log(image)的结果:

undefined

在应用程序的客户端中，File对象被传递。当我试图将其传递给服务器时，问题就出现了。有人能解释一下为什么会这样吗?

我在FormData的帮助下找到了一个解决方案

app.factory('APIFactory', ['$http', function($http) {
  return {
    addEntry: function(mmol, carbs, file) {
      var fd = new FormData();
      fd.append('mmol', mmol);
      fd.append('carbs', carbs);
      fd.append('file', file);
      $http({
        method: 'POST',
        url: 'http://localhost:1337/upload',
        data: fd,
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
      }).then(function success(response) {
        console.log(response);
      }, function error(err) {
        console.log(err);
      })
    }
  }
}]);

我还编辑了我的Express服务器，告诉multer查找具有密钥file的单个文件。

app.post('/upload', upload.single('file'), function(req, res) {
  // Code omitted
});

现在我收到了以下格式的文件:

{ fieldname: 'file',
  originalname: 'placeholder.png',
  encoding: '7bit',
  mimetype: 'image/png',
  buffer: <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 fa 00 00 00 fa 08 06 00 00 00 88 ec 5a 3d 00 00 0a 41 69 43 43 50 49 43 43 20 50 72 6f 66 69 ... >,
  size: 6022 }
相关文章：