角文件上传与ngImgCrop [英] angular-file-upload with ngImgCrop

问题描述

我使用（ ngImgCrop ）裁剪图像，然后使用上传裁剪图像服务器（角文件上传）。

我可以从ngImgCrop了关于变更选项得到$ dataURI。但我需要一个文件instace调用$上传。
我怎样才能得到裁剪图像的文件例如为了上传：

  $ scope.upload = $ upload.upload（{
            网址：'/ API /文件上传'，
            文件：[**文件冒出这里**]
        }）。进度（功能（EVT）{
            //
        }）。成功（功能（数据，状态，头，配置）{
            //
        }）;
 

解决方案

我猜你会发现在这个方法的正确答案。我发现它在Github上，在角文件上传问题页面（<一个href=\"https://github.com/nervgh/angular-file-upload/issues/208\">https://github.com/nervgh/angular-file-upload/issues/208):

  / **
   *数据URI转换成斑点。必要的上传。
   * @see
   * http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata
   * @参数{string}里dataURI
   * @返回{}的Blob
   * /
  VAR dataURItoBlob =功能（dataURI）{
    变种二进制= ATOB（dataURI.split（，）[1]）;
    变种mimeString = dataURI.split（，）[0] .split（：）[1] .split（';'）[0];
    变种数组= [];
    对于（VAR I = 0; I＆LT; binary.length;我++）{
      的Array.push（binary.char $ C $猫（一））;
    }
    返回新的Blob（[新Uint8Array（阵列）] {类型：mimeString}）;
  };
 

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

  VAR BLOB = dataURItoBlob（$ scope.croppedImage）;
 

我不知道，如果它的好方法，但它似乎。

I'm using (ngImgCrop) to crop an image and then upload the cropped image to server using (angular-file-upload).

I can get the $dataURI from the "on-change" option in ngImgCrop. But I need a File instace to call $upload. How can I get the File instance of the cropped image in order to upload :

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

解决方案

I guess you'll find a proper answer in this method. I found it in Github, in the angular-file-upload issues page (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});
  };

You should be able to get a file instance doing something like this:

var blob = dataURItoBlob($scope.croppedImage);

I don't know if it works in the good way, but it seems.

这篇关于角文件上传与ngImgCrop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！