angularjs使用$http post上传文件的时候,怎样获取文件上传的进度

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularjs使用$http post上传文件的时候,怎样获取文件上传的进度相关的知识,希望对你有一定的参考价值。

angular在1.5.5以上的版本中,在$http中也加入了eventHandler和uploadEventHandlers等方法,所以可以直接这样写:
$http(
method: 'POST',
url: url,
eventHandlers:
progress: function(c)
console.log('Progress -> ' + c);
console.log(c);

,
uploadEventHandlers:
progress: function(e)
console.log('UploadProgress -> ' + e);
console.log(e);

,
data: uploadData,
).success(function(data)
console.log(data);
).error(function(data, status)
console.log(data);
);
最后,也可以用比较成熟的组件去解决,推荐angular-file-upload
参考技术A 要通过 ajax 的 onprogress 接口获得进度再进行计算

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

【中文标题】带有文件上传的AngularJs Ajax POST表单【英文标题】:AngularJs Ajax POST form with file upload 【发布时间】: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 上传文件/图像 代替“数据”,“参数”可能会有所帮助 【参考方案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

【讨论】:

以上是关于angularjs使用$http post上传文件的时候,怎样获取文件上传的进度的主要内容,如果未能解决你的问题,请参考以下文章

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

angularjs上传文件怎么设置$http为multipart/form-data

在Laravel中通过AngularJs上传文件时获取值为null

困惑:AngularJS $http POST 响应返回索引文件的 HTML 内容

使用 angularjs $http 将内容类型设置为 utf-8

angularJS通过post方法下载excel文件