带有文件上传的AngularJs Ajax POST表单

时间:2013-10-16 19:16:08

标签: javascript ajax angularjs

我正在尝试使用ajax请求设置要使用Ajax构建的api提交的表单。由于某种原因,文件只是不想传输到系统,虽然已经有一个后端构建来处理这个,它工作正常。

我的服务基于我在此处找到的教程:http://badwing.com/multipart-form-data-ajax-uploads-with-angularjs/

addActivity: function(url){
    return $http({
        method: 'POST',
        url: REQUEST_URL + 'Volunteering/AddActivity?token=' + token + url,
        headers: {
            'Content-Type': 'multipart/form-data'
        },
        data: {
            file: $scope.file
        },
        transformRequest: formDataObject
    }).
    then(function(result) {
        console.log(result);
        return result.data;
    });
},

我感觉这只是一件非常小的东西,我不知道,有人可以提供一些帮助吗?

4 个答案:

答案 0 :(得分:14)

我遇到了类似的问题。

解决方案是使用formData

var formData = new FormData();
formData.append("file", $scope.file);

并替换

data: {
    file: $scope.file
}

data: {
    formdata
}

答案 1 :(得分:7)

我在使用angular + laravel实现文件上传时遇到了问题。每当我尝试发送多部分表单时,服务器都不会收到表单数据,即使它已被发送,或者我认为。我终于找到了解决我所有问题的THIS文章。

长话短说,这是$ http电话:

var data = new FormData();

data.append("file", file);

$http.post("//myDomain.com/api/demo", data, {
    headers: { 'Content-Type': undefined },
    transformRequest: angular.identity
}).success(function (data, status, headers, config) {

}).error(function (data, status, headers, config) {

});

rolin.tencent的另一个答案。深圳还提到将Content-Type设置为undefined,让浏览器对其进行排序。

答案 2 :(得分:3)

数据应为data: $scope.file

并且重要的是:您应该设置'Content-Type': undefined以使浏览器设置正确的内容类型。

答案 3 :(得分:1)

您可以使用此插件,它也是高度可配置的:https://github.com/danialfarid/ng-file-upload