Angularjsファイルのアップロード後にサムネイルが表示されない

Question

ファイルをアップロードしようとしているときに、ファイルのアップロード後にサムネイルが表示されません。しかし、ビデオとPPTのサムネイルが表示されます。私はサムネイル用のカスタムディレクティブを作成しました。 ここに私のコードは、ある

私のhtmlコード：

  <div class="col-md-5" style="overflow: hidden"> 
      <div style="display: inline-block" ng-if="thumbfilelink" ng-thumb="{ file: thumbfilelink, height: 100, width:75, fromServer:true, fileURL:thumbfilelink }"></div> 
      <div style="display:inline-block" ng-if="!thumbfilelink&&!item.isError"> 
      <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><span class="sr-only">Loading Preview...</span> 
      </div> 
      <span style="position: absolute; margin-left: 15px;" ng-bind="item.file.name"></span> 
     </div> 

コントローラー：

  uploader.onSuccessItem = function (fileItem, response, status, headers) { 
      console.info('onSuccessItem', fileItem, response, status, headers); 
      $scope.$parent.delegate.onAttachmentUpload(response); 
      growl.addSuccessMessage($translate.instant('fileUpload.singlefileSuccess')); 
      // $scope.thumbfilelink=response.link; 
      $scope.thumbfilelink=$rootScope.app.coreURI +'file/image/'+response.id+'/preview'; 
     }; 

カスタム指令：

return { 
      restrict: 'A', 
      template: '<div>' + 
      '<canvas class="ac-thumb" style="width:75px" />' + 
      '' + 
      '</div>', 
      transclude:true, 

      link: function (scope, element, attributes) { 
       if (!helper.support) return; 


       var canvas = element.find('canvas'); 
       var reader = new FileReader(); 
       if(params.fromServer) {     
         var img = new Image(); 
         img.onload = onLoadImage; 
         img.src = params.fileURL; 
       } 
       else { 
        if (!helper.isFile(params.file)) return; 
        if (!helper.isImage(params.file)) return; 
        reader.readAsDataURL(params.file); 
        reader.onload = onLoadFile; 
       } 


       function onLoadFile(event) { 
        var img = new Image(); 
        img.onload = onLoadImage; 
        img.src = event.target.result; 
       } 

       function onLoadImage() { 
        var width = params.width || this.width/this.height * params.height; 
        var height = params.height || this.height/this.width * params.width; 
        canvas.attr({width: width, height: height}); 
        canvas[0].getContext('2d').drawImage(this, 0, 0, width, height); 
       } } 
     }; 
    }]); 
}).call(); 

Answer 1

あなたがイベントを操作する必要があります。 onChangeイベント。 on-changeイベントを使用し、バインド経由で呼び出されるコントローラ関数を渡したディレクティブとしてハンドルします。