如何使用angular和FormData简化发送(文件,模型)

时间:2016-04-23 18:25:16

标签: javascript angularjs node.js multipartform-data

我有一个包含大量文本字段和文件字段的表单。我正在使用multer接收文件,这很好。我已经设法在请求中包含所有必要的数据,但我对我的解决方案不满意。是否有更好的方法来附加表单的参数而不是手动指定每个字段?

$scope.createJob = function() {
  var fd = new FormData();
  fd.append("logo", $scope.logo);
  fd.append("title", $scope.formData.title);
  fd.append("title", $scope.formData.description);
  fd.append("title", $scope.formData.hiringOrganization);
  fd.append("title", $scope.formData.jobLocation);
  fd.append("title", $scope.formData.url);
  $http.post('/api/v1/jobs', fd, {
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined}
  })
  .success(function(data) {
    console.log(data);
  })
  .error(function(data) {
    console.log('Error: ' + data);
  });
};

如您所见,我将附加formData对象的每个参数。我试过了

fd.append("body", $scope.formData);
但我最终得到了字符串“[Object object]”。

2 个答案:

答案 0 :(得分:1)

都能跟得上!这不是最好的方式。您应该使用javascript对象,之后,您必须使用angular.toJson()方法将对象转换为.json文件。 之后,你可以发布json。

有关详细信息,请查看此示例:http://jsfiddle.net/aq6SY/ 并查看文档:{​​{3}}

答案 1 :(得分:1)

您可以遍历formData对象以缩短代码:

var fd = new FormData();

for (var property in $scope.formData) {
    if ($scope.formData.hasOwnProperty(property)) {
        fd.append(property, $scope.formData[property]);
    }
}