angularjs中的fileupload產生一個錯誤

我想使用一個簡單的文件上傳使用angularjs，但上傳和關閉按鈕不起作用。angularjs中的fileupload產生一個錯誤

這裏是我的html：

<div> 

    <div class="modal-header"> 
     <h3 class="modal-title">File Attachment</h3> 
    </div> 

    <div class="modal-body"> 
     <input type="file" file-model="myFile" /> 
    </div> 

    <div class="modal-footer"> 
     <div class="btn-toolbar pull-right" role="toolbar"> 
      <div class="btn-group" role="group" ng-controller="FileUploadController as fileUploadCtrl"> 
       <button class="btn btn-default" ng-click="FileUploadCtrl.uploadFile()">Upload</button> 
      </div> 
      <div class="btn-group" role="group"> 
       <button type="button" class="btn btn-default" ng-click="$close()">Close</button> 
      </div> 
     </div> 
    </div> 

</div>

此外，我得到一個錯誤在我的工廠之前我打的瀏覽按鈕，指出以下，但無法在網絡上找到了它的解決方案，甚至儘管我看到很多關於它的問題。

[$injector:undef] Provider 'fileUpload' must return a value from $get factory method.

這裏是我的工廠方法：

.factory('fileUpload', ['$http', function ($http) { 
       this.uploadFileToUrl = function (file, uploadUrl) { 
        var fd = new FormData(); 
        fd.append('file', file); 

        $http.post(uploadUrl, fd, { 
         transformRequest: angular.identity, 
         headers: { 'Content-Type': undefined } 
        }) 

        .success(function() { 
        }) 

        .error(function() { 
        }); 
       } 
      }])

這裏是我的指令：

.directive('fileModel', ['$parse', function ($parse) { 
      return { 
       restrict: 'A', 
       link: function (scope, element, attrs) { 
        var model = $parse(attrs.fileModel); 
        var modelSetter = model.assign; 

        element.bind('change', function() { 
         scope.$apply(function() { 
          modelSetter(scope, element[0].files[0]); 
         }); 
        }); 
       } 
      }; 
     }])

這裏是我的js文件的功能：

module.controller('FileUploadController', ['$scope', 'fileUpload', function ($scope, fileUpload) 
    { 
     $scope.uploadFile = function() 
     { 
      var file = $scope.myFile; 

      console.log('file is '); 
      console.dir(file); 

      var uploadUrl = "/fileUpload"; 

      fileUpload.uploadFileToUrl(file, uploadUrl); 
     }; 
    }])

注意，我需要從此文件開始使用工廠和指令附件功能將用於多種表單。

從什麼錯誤消息說，它看起來像我需要從工廠方法返回一個值，但不知道是什麼....

是否有人可以告訴我怎麼可以完成文件上傳在這裏，我做錯了什麼？

來源

2016-01-20 sagesky36

OhMy！！那是IE？你爲什麼不使用其他瀏覽器？ – robe007

使用Chrome時出現同樣的確切錯誤。 – sagesky36

使用工廠這樣

.factory('fileUpload', ['$http', function ($http) { 
     return 
     { 
      uploadFileToUrl : function(file, uploadUrl){ 
      var fd = new FormData(); 
      fd.append('file', file); 

      $http.post(uploadUrl, fd, { 
       transformRequest: angular.identity, 
       headers: {'Content-Type': undefined} 
      }) 

      .success(function(){ 
      }) 

      .error(function(){ 
      }); 
     } 
     } 
    }]);

，或者如果你想廠，而不是你可以使用 '服務'

.service('fileUpload', ['$http', function ($http) { 
     this.uploadFileToUrl = function(file, uploadUrl){ 
      var fd = new FormData(); 
      fd.append('file', file); 

      $http.post(uploadUrl, fd, { 
       transformRequest: angular.identity, 
       headers: {'Content-Type': undefined} 
      }) 

      .success(function(){ 
      }) 

      .error(function(){ 
      }); 
     } 
    }]);

更多的細節，你可以檢查此鏈接：AngularJS: Service vs provider vs factory

來源

2016-01-20 20:54:13 agm92

angularjs中的fileupload產生一個錯誤

回答

相關問題