AngularJS 文件上传错误：$injector:unpr 未知提供者答案

【问题标题】：AngularJS file upload Error: $injector:unpr Unknown ProviderAngularJS 文件上传错误：$injector:unpr 未知提供者
【发布时间】：2020-04-14 17:26:54
【问题描述】：

我正在尝试使用 angularjs 进行文件上传。但过去几天我收到此错误，我无法解决：

angular.js:13920 错误：[$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=fileUploadServiceProvider%20%3C-%20fileUploadService%20%3C-%20appCtrl
at angular.js:38
at angular.js:4511
at Object.d [as get] (angular.js:4664)
at angular.js:4516
at d (angular.js:4664)
at e (angular.js:4688)
at Object.invoke (angular.js:4710)
at S.instance (angular.js:10354)
at p (angular.js:9263)
at g (angular.js:8620)

我只想读取上传的文件，并将其存储在服务器中，而不是链接到其他 URL。我正在使用 Django 作为我的后端。这是我的代码：

HTML

<body ng-app="myApp">
    <div ng-controller="appCtrl">
        <input type="file" id="file" name="files" accept="text/*"
               data-url="file" class="upload" ng-model="uploadFile"/>
        <label for="file">
          <span class="glyphicon glyphicon-open" id="selectFile">
          </span>Select a file
        </label>
    </div>
</body>
<script src="../static/js/services/fileUploadService.js"></script>
<script src="../static/js/controllers/fileUploadController.js"></script>
<script src="../static/js/fileModel.js"></script>

指令：

var app = angular.module('myApp', [])
app.directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
});

服务

var app = angular.module('myApp', [])
app.factory('fileUploadService', function ($rootScope) {
    var _files = [];

    var service = {
        add: add,
        clear: clear,
        upload: upload,
      }

     return service 

     function add(file){
        _files.push(file)
        $rootScope.$broadcast('fileAdded', file.files[0].name)
      }
      function clear(){
        _files = []
      }
      function upload(){
        _files.submit();        
      }

控制器：

var app = angular.module('myApp', [])
app.controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
    $scope.$watch('uploadFile', function (newVal, oldVal) {
        var submitBtn = document.getElementById('submitBtn');
        //clear existing files
        fileUploadService.clear()
        if(newVal == true){
            var formdata = new FormData();
            $scope.getTheFiles = function ($files) {
                angular.forEach($files, function (value, key) {
                    formdata.append(key, value);
                });
            };    
            // NOW UPLOAD THE FILES.
            $scope.uploadFile = function () {    
                var request = {
                    method: 'POST',
                    url: file,
                    data: formdata,
                    headers: {
                        'Content-Type': undefined
                    }
                };    
                // SEND THE FILES.
                $http(request)
                    .success(function (d) {
                        alert(d);
                    })
                    .error(function () {
                    });
            }
        }]);
        fileUploadService.add(newVal)
        fileUploadService.upload()
    }
})

【问题讨论】：

app 是否在某处声明？我只看到uploadComponent 模块
您没有显示相关部分 - 错误表示未找到 fileUploadService 服务。可能是因为您没有将其添加到应用的依赖项中
@AlonEitan 它实际上在我的脚本中，我忘记显示了。我已经添加了它们。
@BillP 是的，控制器、服务和指令都有var app = angular.module('myApp', [])

标签： angularjs angularjs-directive angularjs-service angularjs-controller angularjs-fileupload

【解决方案1】：

避免创建模块的多个语句。

错误

var app = angular.module('myApp', [])
app.directive("filesInput", function() {
  //...
});

var app = angular.module('myApp', [])
app.factory('fileUploadService', function ($rootScope) {
  //...
}};

var app = angular.module('myApp', [])
app.controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
  //...
});

额外的angular.module('myApp', []) 语句正在覆盖现有模块，导致fileUploadService 被取消注册。

更好

angular.module('myApp', [])

angular.module('myApp').directive("filesInput", function() {
  //...
});

angular.module('myApp').factory('fileUploadService', function ($rootScope) {
  //...
}};

angular.module('myApp').controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
  //...
});

创建模块的语句必须放在所有添加更多实体的代码之前。

来自文档：

创建与检索

注意使用angular.module('myModule', []) 将创建模块myModule 并覆盖任何名为myModule 的现有模块。 使用angular.module('myModule') 检索现有模块。

有关详细信息，请参阅

【讨论】：

【解决方案2】：

通过使用这个：

var app = angular.module('myApp', [])

它创建了一个新模块，因此控制器、服务和指令都注册在一个单独的模块中！这会导致注入错误，因为控制器无法注入服务，因为它是在不同的模块中注册的。

解决方案是只创建一个模块，并在其中注册所有其他组件，如下所示：

第一个文件：

var app = angular.module('myApp', []);
angular.module('myApp').factory('fileUploadService', function ($rootScope) {
   ... 
});

第二个文件

angular.module('myApp').controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
  ...
});

第三个文件：

angular.module('myApp').directive("filesInput", function() {
  ...
});

【讨论】：

另外，在第一个带有var app = angular.module('myApp', []) 的脚本之后，对于服务和组件，它可以写成var app = angular.module('myApp'); app.directive("filesInput", function() {}); 等等。
“在其中注册所有其他组件”是什么意思？所以我在一页中创建指令、控制器和服务？抱歉，我是 angularjs 新手。
@lealceldeiro 所以我不需要再次声明var app = angular.module('myApp', [])？
@user3774763，不，你没有。在第一次调用angular.module('myApp', [])（创建模块）之后，您可以简单地执行angular.module('myApp').directive|factory|component|<any-other>...这将定位模块并创建您之后放置的任何内容：工厂、指令等
它们可以在单独的文件中，因为它们已经是。但是您必须只创建一次应用程序模块（app），正如 lealceldeiro 描述的那样