Angularjs 如何使用Angular访问$http中的XHR？

目前我正在尝试用Angular实现上传功能。起初我使用XmlHttpRequest，但后来我将其更改为$http。所以我发现我无法访问 XmlHttpRequest使用$http创建进度条。下面是我的代码。上传图片时，有没有关于创建进度条的建议？谢谢

    $http({
          method: 'POST',
          url: upload_url,
          data: fd, 
          headers: {'Content-Type': undefined}, 
          transformRequest: angular.identity
          })

这可以为您服务：

            $http.post('http://url.com', {parameter1:'parameter', parameter2: 'secondparameter'}).success(function (result) {
                console.log(result.data);
            }).error(function(data, status, headers, config) {
                console.log(status);
            }));

---

下面是获取xhr对象的方法：

复制/粘贴： 通常，AngularJS应用程序使用$http服务 呼叫后端服务。然而，有时我们希望 访问基础XMLHttpRequest对象。我能想出一个好主意 很少有用例，但最突出的一个可能是能够 跟踪长请求的进度，例如文件上载。为此,， 我们需要在的XMLHttpRequest对象上注册一个事件侦听器 “正在进行中”的事件。令人惊讶的是，Angular的$http 服务不会以任何方式公开底层XMLHttpRequest 对象所以，我们必须要有创意。这里有一种方法

$http服务的config对象允许我们向http服务添加头 通过其“headers”属性请求。这意味着在某个时候 $http必须在它使用的XMLHttpRequest对象上设置这些头。 方法是使用XMLHttpRequest的setRequestHeader方法。 因此，我们的想法是覆盖 XMLHttpRequest的原型，并使用一个特殊的头名称来介绍 钩子。让我们从这个开始，创建一个简单的角度模块 在配置阶段执行方法替换：

现在，当我们进行$http服务调用时，我们可以添加一个名为 “XHR”，其函数值将接收XMLHttpRequest 对象作为其唯一参数。例如，世界上的其他地方 应用程序：

希望AngularJS的未来版本将包括一些官方方式 要访问低级XMLHttpRequest对象（即使有限制），请执行以下操作： 能够注册事件侦听器或翻译 XMLHttpRequest事件转换为角度事件。在此之前，我一直在使用 在我的应用程序中使用上述方法

---

您可以使用$http config的eventHandlers属性注册XMLHttpRequest侦听器，这将为您提供以下进度：

var onProgress = function(event) {
    if (event.total) {
        var progress = event.loaded * 100 / event.total;
        // do stuff
    }
};

$http({
      method: 'POST',
      url: upload_url,
      data: fd, 
      headers: {'Content-Type': undefined}, 
      transformRequest: angular.identity,
      uploadEventHandlers: { progress: onProgress }
      });

---

我认为这应该涵盖您的用例。我认为您也可以在事件侦听器中使用

这个
来获取XmlHttpRequest实例。
请参考：这在另一方面非常有用，谢谢
$http({
    …
    headers: {
        …
        __XHR__: function() {
            return function(xhr) {
                xhr.upload.addEventListener("progress", function(event) {
                    console.log("uploaded " + ((event.loaded/event.total) * 100) + "%");
                });
            };
        },
        …
    },
    …
}).success(…);

var onProgress = function(event) {
    if (event.total) {
        var progress = event.loaded * 100 / event.total;
        // do stuff
    }
};

$http({
      method: 'POST',
      url: upload_url,
      data: fd, 
      headers: {'Content-Type': undefined}, 
      transformRequest: angular.identity,
      uploadEventHandlers: { progress: onProgress }
      });