我正在尝试使用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()
}
})
通过使用此：
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() {
...
});
ERRONEOUS
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')检索现有模块。
有关更多信息，请参阅