Question

尝试研究如何使用AngularJS将图像与其他表单数据一起提交到REST API的完整方法。虽然在使用postman chrome扩展名测试REST API时它完美地工作，但是在服务器上始终将图像作为“null”截获。

以下是控制器代码：

$scope.submitForm = function(){
    var formData=new FormData();
    formData.append('image', $scope.fileName);
    formData.append('title', $scope.subject);
    formData.append('body', $scope.body);
    $http({
        method  : 'POST',
        url     : 'formhandler',
        data    : formData,
        headers : {'Content-Type': undefined},
        transformRequest: function(data, headersGetterFunction) {
            return data;
        }
    }).success(function(data) {
        $scope.openModal.hide();
    });
};

提前感谢您，非常感谢任何帮助。

Answer 1

经过长时间的调查，似乎问题出现在文件指令中而不是在控制器中，并且通过使用下面的指令代码，我已经成功地将图像文件发布到服务器。

angular.module('yourApp').directive('file', [
    function() {
      return {
        restrict: "E",
        template: "<input type=\"file\" />",
        replace: true,
        require: "ngModel",
        link: function(scope, element, attr, ctrl) {
          var listener;
          listener = function() {
            return scope.$apply(function() {
              if (attr.multiple) {
                return ctrl.$setViewValue(element[0].files);
              } else {
                return ctrl.$setViewValue(element[0].files[0]);
              }
            });
          };
          return element.bind("change", listener);
        }
      };
    }
]);

了解更多信息;检查以下链接： https://gist.github.com/tdrozdowski/6468541

Answer 2

我花了一些时间才找到解决方案;那我就打算分享一下吧。事实上，我认为你接近解决方案。这就是我所做的：

在控制器上：

var uploadImages = function () {
    var formData = new FormData(),
        len = $scope.Files.length, // Supposing that your images are here (the objects in the input type='file')
        i = 0;

    for ( ; i < len; i++) {
        formData.append('file[]', $scope.Files[i]);
        formData.append('title[]', $scope.FilesDetails[i].title); // If you need attach arrays of data
    }

    formData.append('moreInfo1', $scope.moreInfo1); // Adding other information
    formData.append('moreInfo2', $scope.moreInfo2);

    ImageManager.uploadImages(formData)
        .success(function (data) {
            console.log('Success: ' + data);
        })
        .error(function (data, status) {
            console.log('Error: ' + data + '. Status: ' + status);
        });
};

关于服务：

angular.module('myApp')
    .factory('ImageManager', function ($http) {
        uploadImages: function(formData) {
            return $http.post('uploadImages.php', formData, {
                transformRequest: angular.identity,
                headers: { 'Content-Type': undefined }
            });
        }
    });

然后从PHP中，如果你正在使用的话，你需要检查$ _FILES和$ _REQUEST对象;信息将在那里。

希望有所帮助！

在AngularJS中发送image / jpeg以及其他表单数据

2 个答案: