javascript - angularJS:将图像上传逻辑放在哪里更好？

Question

例如，在两个不同的 Controller 中，我有:

$scope.photoChanged = function(files) {
  $scope.type = files[0].type.split('/');
  $scope.selectedPhoto = true;
  $scope.accepted_type = /jpeg|png/.test($scope.type);
  if ($scope.accepted_type && files[0].size < 1990000) {
    $scope.files = files;
    var reader = new FileReader();
    reader.onload = function(e) {
      $scope.AvatarUrl = $scope.user.SmallAvatarUrl;
    };
    reader.readAsDataURL(files[0]);
  } else {
    $scope.files = undefined;
  }
  $scope.loadingPhoto = false;
};

和:

$scope.photoChanged = function(files) {
  $scope.type = files[0].type.split('/');
  $scope.selectedPhoto = true;
  $scope.accepted_type = /jpeg|png/.test($scope.type);
  if ($scope.accepted_type && files[0].size < 1990000) {
    $scope.files = files;
    var reader = new FileReader();
    reader.onload = function(e) {
      $scope.ArticlePhotoUrl = $scope.user.ArticlePhotoUrl;
    };
    reader.readAsDataURL(files[0]);
  } else {
    $scope.files = undefined;
  }
  $scope.loadingPhoto = false;
};

现在我想重构这段代码...

但我有一个问题:

把这个逻辑放在哪里更好？

在:

• 主要父级app.js
• Controller 正在运行
• 指令中

在这种情况下什么更合适？然后我将此图像与图像裁剪一起使用...

Answer 1

您可以将其放入普通的 js 文件中，并传递 $scope 作为参数来处理它。

这可以是你的 helper.js 来放置所有常用方法。

$scope.photoChanged = function(files) {
  uploadFile($scope,files);
};

var uploadFile = function(scope,files){
scope.type = files[0].type.split('/');
  scope.selectedPhoto = true;
  scope.accepted_type = /jpeg|png/.test(scope.type);
  if (scope.accepted_type && files[0].size < 1990000) {
    scope.files = files;
    var reader = new FileReader();
    reader.onload = function(e) {
      scope.ArticlePhotoUrl = scope.user.ArticlePhotoUrl;
    };
    reader.readAsDataURL(files[0]);
  } else {
    scope.files = undefined;
  }
  scope.loadingPhoto = false;
}

uploadfile 方法可以位于不同的.js 文件中