使用AngularJS通过POST发送文件

时间:2017-03-31 13:37:15

标签: angularjs api post

我有问题通过POST以角度发送数据, 我的数据包括2个文件和一些文本字段, 问题是服务没有收到任何数据。

这是我的代码:

var inputs = document.querySelectorAll( 'input[type="file"]' );

Array.prototype.forEach.call( inputs, function( input ){
    input.addEventListener( 'change', function( e ){
    if(this.id == "zipToUpload")
            $scope.zipToUpload = this.files[0];
        else
            $scope.imgToUpload = this.files[1];
    });
}); 

$scope.submit = function(){
    var getInput = {nome: $scope.app_name, zipToUpload: $scope.zipToUpload, imgToUpload: $scope.imgToUpload, url: $scope.app_url,
        secure: $scope.checkbox_pass, hide: $scope.checkbox_hide, beta: $scope.checkbox_beta, password: $scope.app_pass, location: "1" };

    var req = {
        method: 'POST',
        url: 'api/rest/app/insert_app.php',
        headers: {
            'Content-Type': undefined
        },
        data: getInput
    }

    $http(req)
    .then(function(result) {
            console.log(result);        
    });
}

1 个答案:

答案 0 :(得分:0)

您无法使用角度模型直接上传文件。首先,您需要一个指令将文件绑定到模型。

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

输入将如下:

 <input type = "file" file-model = "myFile"/>

您可以使用表单数据发送帖子请求

$scope.upload = funtion(){
  var fd = new FormData();
  fd.append('file', $scope.myFile);
  var req = {
    method: 'POST',
    url: 'api/rest/app/insert_app.php',
    headers: {
        'Content-Type': undefined
    },
    data: fd
   }

$http(req)
.then(function(result) {
        console.log(result);        
});
}