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) {
        ...
    });
}

这是类似的小提琴：JSFiddle

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

1 个答案: