Angular.js 在控制器中使用 Upload.progress 事件答案

【问题标题】：Angular.js Consuming Upload.progress event in a controllerAngular.js 在控制器中使用 Upload.progress 事件
【发布时间】：2016-11-20 14:50:55
【问题描述】：

我有一个在控制器中上传文档的代码，我希望将它移动到服务中，以便其他控制器可以使用它。

"use strict";
angular.module('myApp')
.service('uploadDocumentService', ['Upload', function (Upload) {
    this.UploadDocument = function ($file, data) {

        Upload.upload({
            url: '/uploadDocuments',
            file: $file,
            data: data
        }).progress(function (evt) {
            var progressReport = {};
            progressReport.progressVisible = true;
            progressReport.percentage = Math.round(evt.loaded / evt.total * 100);
            return progressReport;
        }).success(function (data, status, headers, config) {
            var fileUploaded = {};
            fileUploaded.id = data.id;
            fileUploaded.name = data.fileName;
            return fileUploaded;
        });
    }

}]);

我无法在我的控制器中捕获 .progress 事件

 uploadDocumentService.UploadDocument($file, 'Path')
                .progress(function (progressReport) {
                  //Some code
                }).success(function (data) {
                  //Some code

            });

不断收到错误无法读取未定义的属性“进度” 在 m.$scope.uploadDocuments 关于如何解决这个问题的任何提示，我需要在服务中注册进度事件吗？

【问题讨论】：

请确认您的控制器是否有服务-uploadDocumentService..angular.module('myApp').controller("MyCtrl", function($scope, uploadDocumentService)
我认为您的控制器函数中缺少 uploadDocumentService 参数，这导致了未定义的错误。希望这对您有用:)

标签： angularjs angular-services angular-controller

【解决方案1】：

为了达到您的预期效果，请在您的控制器函数中添加 uploadDocumentService 参数。

angular.module('myApp').controller("controller", function($scope, uploadDocumentService)

【讨论】：

@Rahul Ganguly，如果我的回答对您的问题有所帮助，请投票或将其标记为已回答:)
这存在于我的控制器中，
@RahulGanguly，也请分享您的控制器代码
感谢帮助，有同事指出我错过了return语句，服务中的代码应该是这样return Upload.upload({})

【解决方案2】：

控制器代码

"use strict";
angular.module('myApp')
.controller('controller', ['$scope', '$http',  'Upload', 'uploadDocumentService', function ($scope, $http, Upload, uploadDocumentService) {
 $scope.uploadDocuments = function ($files) {
        $scope.progressVisible = false;
        for (var i = 0; i < $files.length; i++) {
            var $file = $files[i];
            uploadDocumentService.UploadDocument($file, 'path')
                .progress(function (evt) {
                    $scope.progressVisible = true;
                    $scope.percentage = Math.round(evt.loaded / evt.total * 100);

                }).success(function (data) {
                var fileUploaded = {};
                fileUploaded.id = data.id;
                fileUploaded.name = data.fileName;
                $scope.filesUploaded.push(fileUploaded);
                $scope.isFileUploaded = true;                   

            });
}]);

【讨论】：

【解决方案3】：

一位同事指出错误，修复如下，在Upload.upload语句中缺少return

"use strict";
angular.module('myApp')
.service('uploadDocumentService', ['Upload', function (Upload) {
    this.UploadDocument = function ($file, data) {
        return Upload.upload({
            url: '/uploadDocuments',
            file: $file,
            data: data
        }).progress(function (evt) {

        }).success(function (data, status, headers, config) {
        });
    }

}]);

【讨论】：