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

【问题标题】：AngularJs Ajax POST form with file upload带有文件上传的AngularJs Ajax POST表单
【发布时间】：2013-10-25 01:33:53
【问题描述】：

我正在尝试设置一个表单，以使用 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;
    });
},

我觉得我错过了一些非常小的东西，有人可以提供一些帮助吗？

【问题讨论】：

什么是REQUEST_url
我正在使用的全局变量
@flashpunk 你把$scope.file 像这样<input type="file" ng-model="file"/> 放了吗？因为我也需要用angularjs ajaxly 上传文件/图像
代替“数据”，“参数”可能会有所帮助

标签： javascript ajax angularjs

【解决方案1】：

我遇到了类似的问题。

解决办法是使用formData

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

替换

data: {
    file: $scope.file
}

与

data: {
    formdata
}

【讨论】：

许多ie浏览器不支持formdata，ie10+版本支持，所以不是通用解决方案
@Satish 同意，这不是最好的解决方案。你有提供吗？
除了 XMLHttRequest 2 或者说 FormData 对象之外，没有其他方法可以使用 Ajax 上传文件。我假设对于不兼容的浏览器，开发人员使用 Flash 或其他一些技术。
考虑弃用 IE9。几乎所有平台都弃用它（即仅在 vista 和 windows server 2008 中支持）。谷歌不支持 IE9。 Facebook 不支持 IE9。 MS 不支持 Windows 7+ 的 IE9。
FormData 的完整支持表：caniuse.com/#search=formdata -- 我认为使用它非常安全 :)

【解决方案2】：

我在使用 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.Shenzhen的另一个回答也提到将Content-Type设置为undefined，让浏览器整理出来。

【讨论】：

【解决方案3】：

数据应该是data: $scope.file

还有重要的一点：您应该设置'Content-Type': undefined 以使浏览器设置正确的内容类型。

【讨论】：

【解决方案4】：

你可以使用这个插件，它也是高度可配置的：https://github.com/danialfarid/ng-file-upload

【讨论】：