Question

以下是我在输入更改时将文件上传到服务器的代码

    $scope.uploadImage = function (f) { 
        $http.post('/art',{'image':f},{headers: {'Content-Type': undefined}}).then(function (response) {
            console.log(response);
        }); 
    }

但是我会在服务器中获取空文件，但我检查我的服务器端代码是否正常文件上载它没有任何问题正常工作

Serverside

//get empty in angular upload 
     console.log(req.file('image'));

        req.file('image').upload({
                // don't allow the total upload size to exceed ~10MB
                maxBytes: 10000000
            },function whenDone(err, uploadedFiles) {

            return res.json({
                'status':uploadedFiles
            })
        });

HTML

<input type="file" ng-model="art.artImage" onchange="angular.element(this).scope().uploadImage(this.files)" name="artImage" id="artImage">

我认为角度http post请求中的content-type存在问题

Answer 1

当输入类型为file时，文件不会附加模型。你需要一个像这样的解决方法。

.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    }
}]);

更改输入，如

<input type="file" fileread="art.artImage" onchange="angular.element(this).scope().uploadImage(this.files)" 
name="artImage" id="artImage">

在您的请求中使用multipart标头

$http.post('/art', {
    'image': art.artImage
}, {
    transformRequest: angular.identity,
    headers: {
        'Content-Type': "multipart/form-data"
    }
})

Answer 2

请尝试此操作，避免在文件的HTML标记中使用onload：

<html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
   </head>

   <body ng-app = "myApp">

  <div ng-controller = "myCtrl">
     <input type = "file" file-model = "myFile"/>
     <button ng-click = "uploadFile()">upload me</button>
  </div>

  <script>
     var myApp = angular.module('myApp', []);

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

     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(){
               alert("Done");
           })            
           .error(function(){
               alert("Sorry");
           });
        }
     }]);

     myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
        $scope.uploadFile = function(){
           var file = $scope.myFile;

           console.log('file is ' );
           console.dir(file);

           var uploadUrl = "/art";
           fileUpload.uploadFileToUrl(file, uploadUrl);
        };
     }]);

  </script>

   </body>
</html>

Answer 3

使用ng-fileUpload lib for angularjs

我的HTML

<form  method="post" enctype="multipart/form-data" ng-controller="commentCtrl" name="form">
    <a href="" type="file" class="custom-height"><img src="source/assets/images/icons/icofileattached.png" class="attachmentpng-height"  ngf-select="uploadFiles($file)" ng-model="files"/></a>
    <md-button type="submit" class="md-raised custom-submit-button" ng-click="MakeComments()"> SUBMIT </md-button>
    </form>

我的控制器代码

$scope.uploadFiles = function(file) {
            console.log(file);
            $scope.fileData = file;
            var fd = new FormData();
            fd.append('file', file);
            Restangular.one('/api/files/end points').withHttpConfig({transformRequest: angular.identity})
                .customPOST(fd, '', undefined, {'Content-Type': undefined})
        };

Angular upload onchange事件：在服务器中获取空文件

3 个答案: