2014-05-12 50 views
0

我有一些onload圖像和angular-fie-upload的問題。首先,我必須在驗證圖像大小之後,我將使用以下代碼將此圖像上傳到服務器端。我的服務看起來像:Angularjs用onLoad圖像上傳服務?

Services.factory('$uploadWrapper', ['$upload' , '$logger' , function ($upload, $logger) { 
    return function (url, file, informations, onSuccess, onError, onProgress) { 
     url = url || angular.noop; 
     file = file || angular.noop; 
     informations = informations || angular.noop; 
     onSuccess = onSuccess || angular.noop; 
     onError = onError || angular.noop; 
     onProgress = onProgress || angular.noop; 

     $upload.upload({ 
      url: url, 
      method: 'POST', 
      // headers: {'header-key': 'header-value'}, 
      // withCredentials: true, 
      data: informations, 
      file: file // or list of files: $files for html5 only 
      /* set the file formData name ('Content-Desposition'). Default is 'file' */ 
      //fileFormDataName: myFile, //or a list of names for multiple files (html5). 
      /* customize how data is added to formData. See #40#issuecomment-28612000 for sample code */ 
      //formDataAppender: function(formData, key, val){} 
     }).progress(function (evt) { 
      $logger.info(Math.min(100, parseInt(100.0 * evt.loaded/evt.total))); 
      onProgress(evt); 
     }).success(function (response) { 
      $logger.info('POST' + url + angular.toJson(response)) 
      onSuccess(response); 
     }).error(function (error) { 
      $logger.error('POST' + url + ' ' + angular.toJson(error)); 
      onError(error); 
     }); 
    } 
}]); 

和驗證過程中,我將創建一個圖像採取寬和我的形象的高度:

$scope.onFileSelect = function ($files) { 
     $scope.loading = true; 
     //$files: an array of files selected, each file has name, size, and type. 
     file = $files[0]; 
     var img = new Image(); 
     img.src = _URL.createObjectURL(file); 
     img.onload = function() { 
      console.log(this.width + "x" + this.height); 
      if (img.width > sizes.width && img.height > sizes.height) { 
      $uploadWrapper(pinholeAdminServerRoutes.image.upload, file, { 
       "operationType": 'channels', 
       "objectId": $scope.channel.id, 
       "size": 'large' 
      }, function (response) { 
       $scope.loading = false; 
      }, function (error) { 
        $scope.errors.push(error); 
       $scope.loading = false; 
      }); 
      } else { 
       $scope.imageSizeNotValid = true; 
       $scope.loading = false; 
      } 
      console.log('finish loading'); 
     }; 
    }; 

但是,我的服務將不會在裏面工作onload塊。但相同的服務將在沒有onload塊的情況下工作。

回答

0

我終於通過$scope.$applyonload事件中得到了解決。