javascript - 使用 ng-file-upload 上传原始图像和调整大小的图像

Question

我正在尝试让我的应用程序将调整大小的图像和原始文件保存在服务器中。

这是我迄今为止尝试过的:

HTML:

<a ng-model="originalPic" 
   ngf-select="uploadphototest($file)" 
   ngf-resize="{width: 1170, type: 'image/jpeg'}" 
   ngf-resize-if="$width > 1000"
   ngf-model-options="{updateOn: 'change drop paste'}" 
   ngf-fix-orientation="true">
      Upload image
</a>

JS:

$scope.uploadphototest = function (file) {
  $scope.fileext = file.name.substring(file.name.lastIndexOf('.'), file.name.length);
  $scope.uniqueportrait = $scope.fairnameonly + "-" + moment().format('DD-MM-YYYY-HH-mm-ss') + $scope.fileext;

  Upload.imageDimensions(file).then(function(dimensions){
    if (dimensions.width < 1170){
      $scope.sizeerror = true;

    }else{

      fileor = $scope.originalPic;

      Upload.upload({
        url: 'uploadtest.php',
        data: {
          file: file,
          name: Upload.rename(file, $scope.uniqueportrait),
          fileor: fileor,
        }
      }).then(function (resp) {
         ...
      });
    };
  });
};

还有我的 PHP:

<?php
    $filename = $_FILES['file']['name'];
    $destination = '/home/clients/cc5399b00bc00f15dc81742a0369c7b8/discovery/register/uploadstest/' . $filename;
    move_uploaded_file( $_FILES['file']['tmp_name'] , $destination );

    $filenameor = "ORIGINAL".$_FILES['fileor']['name'];
    $destinationor = '/home/clients/cc5399b00bc00f15dc81742a0369c7b8/discovery/register/uploadstest/' . $filenameor;
    move_uploaded_file( $_FILES['fileor']['tmp_name'] , $destinationor ); 
?>

到目前为止正在经历，但只上传调整大小的模型，原始模型似乎没有从模型传递到函数，因为模型在控制台中返回时未定义......

我错过了什么？

Answer 1

您可以使用库的Upload.resize服务。不要在 HTML 中使用 ngf-resize 和 gf-resize-if，而是在 JS 中调整文件大小。像这样的东西:

HTML:

<a ng-model="originalPic" 
   ngf-select="uploadphototest($file)" 
   ngf-model-options="{updateOn: 'change drop paste'}" 
   ngf-fix-orientation="true">
      Upload image
</a>

JS

$scope.uploadphototest = function (file) {
  $scope.fileext = file.name.substring(file.name.lastIndexOf('.'), file.name.length);
  $scope.uniqueportrait = $scope.fairnameonly + "-" + moment().format('DD-MM-YYYY-HH-mm-ss') + $scope.fileext;

  Upload.imageDimensions(file).then(function(dimensions){
    if (dimensions.width < 1170){
        $scope.sizeerror = true;
    } else if(dimensions.width > 1000){
        var resizeOptions = {
            width: 1170
        };

        Upload.resize(file, resizeOptions).then(function(resizedFile) {
            uploadFile(file, resizedFile);
        });
    } else {
        uploadFile(file, file);
    }
  });
};

function uploadFile(originalFile, resizedFile) {
    Upload.upload({
        url: 'uploadtest.php',
        data: {
            file: resizedFile,
            fileor: Upload.rename(file, $scope.uniqueportrait), //This returns a file
        }
    }).then(function (resp) {
        ...
    });
}

这里有一个类似的 fiddle :JSFiddle