8

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

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

3 回答 3

2

这里获取xhr对象的方式：

http://boylesoftware.com/blog/angular-tip-using-the-xmlhttprequest-object/

复制粘贴：

通常，AngularJS 应用程序使用 $http 服务来调用后端服务。然而，有时我们希望能够访问底层的 XMLHttpRequest 对象。我可以提出一些用例，但最突出的一个可能是能够跟踪长请求的进度，例如文件上传。为此，我们需要在 XMLHttpRequest 对象上为“进行中”的事件注册一个事件侦听器。令人惊讶的是，Angular 的 $http 服务并没有以任何方式暴露底层的 XMLHttpRequest 对象。所以，我们必须要有创意。这是一种方法……</p>

$http 服务的配置对象允许我们通过其“headers”属性向 HTTP 请求添加标头。这意味着在某些时候 $http 必须在它使用的 XMLHttpRequest 对象上设置这些标头。这样做的方法是使用 XMLHttpRequest 的 setRequestHeader 方法。所以想法是重写 XMLHttpRequest 原型上的 setRequestHeader 方法，并使用一个特殊的 header 名称来引入一个钩子。让我们从它开始，创建一个简单的 Angular 模块，在其配置阶段执行方法替换：

angular.module("bsworksXHR", []).config([
    function() {
        XMLHttpRequest.prototype.setRequestHeader = (function(sup) {
            return function(header, value) {
                if ((header === "__XHR__") && angular.isFunction(value))
                    value(this);
                else
                    sup.apply(this, arguments);
            };
        })(XMLHttpRequest.prototype.setRequestHeader);
    }
]);

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

$http({
    …
    headers: {
        …
        __XHR__: function() {
            return function(xhr) {
                xhr.upload.addEventListener("progress", function(event) {
                    console.log("uploaded " + ((event.loaded/event.total) * 100) + "%");
                });
            };
        },
        …
    },
    …
}).success(…);

希望 AngularJS 的未来版本将包含一些访问低级 XMLHttpRequest 对象的官方方法，即使受到限制，例如能够注册事件侦听器或将 XMLHttpRequest 事件转换为 Angular 事件。在那之前，我在我的应用程序中使用上述方法。

于 2017-05-16T08:31:46.863 回答
0

这可以为您服务：

            $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);
            }));
于 2015-05-28T16:38:59.970 回答
0

您可以使用 $http 配置的 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 }
      });

我认为这应该涵盖您的用例。我认为您也可以this在事件侦听器内部使用来获取 XmlHttpRequest 实例。

于 2018-05-24T16:28:09.200 回答