2016-07-25 14 views
1

私は角度アプリケーションに画像をアップロードするためにGITを使用しています

https://github.com/danialfarid/ng-file-upload

HTMLは次のとおりです。

<body ng-app="fileUpload" ng-controller="MyCtrl"> 
    <h4>Upload on file select</h4> 
    <button type="file" ngf-select="uploadFiles($file, $invalidFiles)" 
      accept="image/*" ngf-max-height="1000" ngf-max-size="1MB"> 
     Select File</button> 
    <br><br> 
    File: 
    <div style="font:smaller">{{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}} 
     <span class="progress" ng-show="f.progress >= 0"> 
      <div style="width:{{f.progress}}%" 
       ng-bind="f.progress + '%'"></div> 
     </span> 
    </div>  
    {{errorMsg}} 
</body> 

のjsスクリプトは以下のとおりです。

//inject angular file upload directives and services. 
var app = angular.module('fileUpload', ['ngFileUpload']); 

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) { 
    $scope.uploadFiles = function(file, errFiles) { 
     $scope.f = file; 
     $scope.errFile = errFiles && errFiles[0]; 
     if (file) { 
      file.upload = Upload.upload({ 
       url: 'https://angular-file-upload-cors-srv.appspot.com/upload', 
       data: {file: file} 
      }); 

      file.upload.then(function (response) { 
       $timeout(function() { 
        file.result = response.data; 
       }); 
      }, function (response) { 
       if (response.status > 0) 
        $scope.errorMsg = response.status + ': ' + response.data; 
      }, function (evt) { 
       file.progress = Math.min(100, parseInt(100.0 * 
             evt.loaded/evt.total)); 
      }); 
     } 
    } 
}]); 

し、以下のようにCSS:

.thumb { 
    width: 24px; 
    height: 24px; 
    float: none; 
    position: relative; 
    top: 7px; 
} 

form .progress { 
    line-height: 15px; 
} 

.progress { 
    display: inline-block; 
    width: 100px; 
    border: 3px groove #CCC; 
} 

.progress div { 
    font-size: smaller; 
    background: orange; 
    width: 0; 
} 

問題は、私は、アップロードブラウザ(クローム開発ツール)を実行しようとすると、次のエラーをスローしていることである:

ng-file-upload.min.js:2 Uncaught TypeError: a.$ngfDimensionPromise.finally is not a functionf.imageDimensions

@ ng-file-upload.min.js:2m @ ng-file-upload.min.js:2(anonymous function) @ ng-file-upload.min.js:2n @ angular.min.js:6i @ ng-file-upload.min.js:2f.validate @ ng-file-upload.min.js:2i.updateModel @ ng-file-upload.min.js:2m @ ng-file-upload.min.js:2dispatch @ jquery.min.js:2h @ jquery.min.js:2$scope.uploadFiles @ contacts.js:200(anonymous function) @ angular.min.js:74m @ ng-file-upload.min.js:2(anonymous function) @ ng-file-upload.min.js:2i @ angular.min.js:79(anonymous function) @ angular.min.js:80$eval @ angular.min.js:92$digest @ angular.min.js:90$apply @ angular.min.js:92(anonymous function) @ angular.min.js:108e @ angular.min.js:31(anonymous function) @ angular.min.js:34

angular.min.js:63 TypeError: f.finally is not a function

at d.dataUrl (ng-file-upload.min.js:2) 
at ng-file-upload.min.js:2 
at angular.min.js:108 
at e (angular.min.js:31) 
at angular.min.js:34 
+0

'a。$ ngfDimensionPromise.finallyは関数f.imageDimensions'ではありません。** <<< **この問題を修正しました。 –

+0

how ????どのような提案も歓迎よりも:)! –

+0

まず、問題の原因となっているコード行を特定します。 –

答えて

0

これは、現在稼働しています! ! :)

ng-file-upload.min.js内の関数が見つからないというエラーが表示されていたため、展開の問題でした。

ng-file-upload.min.js:2 Uncaught TypeError: a.$ngfDimensionPromise.finally is not a functionf.imageDimensions

私は「NG-ファイルのアップロードは、」完全にアンインストールして、もう一度それをインストールした後、ノード・モジュールのフォルダの下にインストールされていなかったことがわかった、私が期待されるファイルが実際にノードモジュールの下で発見されたことを見ることができました/ ng-file-uploadとエラーがなくなった! :)

ちょうど

NPMはNG-ファイルアップロード

をインストールしてから、ちょうどこのURL https://github.com/danialfarid/ng-file-uploadで見つかった指示に従ってください、それが動作するプロジェクトフォルダ内、以下のコマンドを実行することを忘れないでください! :)

関連する問題