使用 ngImgCrop 上传角度文件答案

【问题标题】：angular-file-upload with ngImgCrop使用 ngImgCrop 上传角度文件
【发布时间】：2014-11-16 21:00:54
【问题描述】：

我正在使用 (ngImgCrop) 裁剪图像，然后使用 (angular-file-upload) 将裁剪后的图像上传到服务器。

我可以从 ngImgCrop 中的“on-change”选项获取 $dataURI。但我需要一个文件实例来调用 $upload。如何获取裁剪图像的 File 实例以便上传：

        $scope.upload = $upload.upload({
            url: '/api/fileupload',
            file: [**file cropped here**]
        }).progress(function (evt) {
            //
        }).success(function (data, status, headers, config) {
            //
        });

【问题讨论】：

如何从数据 URI 创建文件对象？
嗨，哥们，我也遇到了同样的问题。正如我在stackoverflow.com/questions/26360403/… 解释的那样，我上传了裁剪后的图像，但在服务器端获取可用图像时遇到了一些麻烦。图片似乎无法正常打开。您是否使用 angular-file-upload 解决了您的问题？我也将它用于其他目的，但如果它有效，我也可以使用它来上传裁剪的图像。还是谢谢！
不，我在服务器端进行了裁剪。使用 python Pillow。
大家好，我成功了，检查我的更新！
你能告诉我如何使用 angular-file-upload 的 onFileSelect 中的 $files 作为 img-crop 的图像属性

标签： angularjs file-upload crop angular-file-upload

【解决方案1】：

尝试类似：

 var uploader = $scope.uploader = new FileUploader({
        url: '/saveImagePath',
        autoUpload: false
    });

angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);

var handleFileSelect=function(evt) {
      var file=evt.currentTarget.files[0];
      var reader = new FileReader();
      reader.onload = function (evt) {
        $scope.$apply(function($scope){
          $scope.myImage=evt.target.result;
        });
      };
      reader.readAsDataURL(file);
    };

上传器不支持 base64 图像，因此您需要将裁剪后的图像从 base64 转换为 blob

function base64ToBlob(base64Data, contentType) {
        contentType = contentType || '';
        var sliceSize = 1024;
        var byteCharacters = atob(base64Data);
        var bytesLength = byteCharacters.length;
        var slicesCount = Math.ceil(bytesLength / sliceSize);
        var byteArrays = new Array(slicesCount);

        for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
            var begin = sliceIndex * sliceSize;
            var end = Math.min(begin + sliceSize, bytesLength);

            var bytes = new Array(end - begin);
            for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) {
                bytes[i] = byteCharacters[offset].charCodeAt(0);
            }
            byteArrays[sliceIndex] = new Uint8Array(bytes);
        }
        return new Blob(byteArrays, { type: contentType });
    }

您必须像这样手动将文件附加到队列中：

$scope.submit = function () {
         var file = base64ToBlob($scope.currentPortfolio.croppedImage.replace('data:image/png;base64,',''), 'image/jpeg');
        uploader.addToQueue(file);
        uploader.uploadAll();

    };

在服务器端，你有两种类型的文件，一种是 HTML 文件，另一种是 unbase64 格式的裁剪图像。

【讨论】：

【解决方案2】：

我想你会在这个方法中找到正确的答案。我在 Github 的 angular-file-upload 问题页面 (https://github.com/nervgh/angular-file-upload/issues/208) 中找到了它：

/**
   * Converts data uri to Blob. Necessary for uploading.
   * @see
   *   http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata
   * @param  {String} dataURI
   * @return {Blob}
   */
  var dataURItoBlob = function(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var array = [];
    for(var i = 0; i < binary.length; i++) {
      array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: mimeString});
  };

你应该能够得到一个文件实例做这样的事情：

var blob = dataURItoBlob($scope.croppedImage);

我不知道它是否有效，但似乎。

【讨论】：