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

【问题标题】：Uploading both original and resized images with ng-file-upload使用 ng-file-upload 上传原始图像和调整大小的图像
【发布时间】：2017-08-21 15:06:11
【问题描述】：

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

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

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 ); 
?>

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

我错过了什么？

【问题讨论】：

标签： javascript php angularjs ng-file-upload

【解决方案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>

$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

【讨论】：