使用angular $ http上传文件

时间:2016-11-27 07:38:11

标签: javascript angularjs

我正在尝试上传带有角度$ http功能的图像文件的表单,并使用背景上的multer来接收。我知道如何直接提交表单(没有角度),我可以通过以下方式成功上传:

    <form method="post"  enctype="multipart/form-data">  
        <input type="file" name="avatar" /><br/>  
        <input type="submit" value="submit"/><br/>  
    </form>  

这样,图像将在req.file中。 但是,当我尝试使用angular http上传它时:

    <form name="myForm" ng-model="formData" enctype="multipart/form-data"> 
        <input type="file" file-model="avatar" name="avatar" required/><br/>  
        <label class="item item-input">
            <button class="button button-block button-positive" ng-click="submit()" class="btn btn-primary btn-block">submit</button>
        </label>
        <label class="item item-input">
            <button class="button button-block button-dark" ng-click="home()" >back</button>
        </label>
    </form>

JS:

$scope.submit = function() {
        var fd = new FormData();
        fd.append('avatar', $scope.avatar);
        $http({
            url:'/avatar',
            method: 'POST',            
            data: fd,
            headers: {
                'Content-Type': 'undefined'
            },
            transformRequest: angular.identity    
        }).success(function(data,status){
            if(status == 200) {
                window.location = '/home';
            }

        }).error(function(status, data){
            window.location = '/avatar';
        })
    }

req.file字段变为未定义。那么如何通过angular $ http?

上传我的图像

1 个答案:

答案 0 :(得分:0)

“文件模型”-directive不是角度的一部分。你有依赖吗? https://github.com/ghostbar/angular-file-model