angularjs – 使用ngImgCrop上传angular-file-upload

发布时间：2020-12-17 10:17:43 所属栏目：安全来源：网络整理

导读：我正在使用( ngImgCrop)裁剪图像,然后使用( angular-file-upload)将裁剪后的图像上传到服务器. 我可以从ngImgCrop中的“on-change”选项中获取$dataURI.但我需要一个File instace来调用$upload. 如何获取裁剪图像的File实例以便上传： $scope.upload = $uplo

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

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

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

我猜你会在这个方法中找到合适的答案.我在Github中找到了它,在angular-file-upload issues页面( https://github.com/nervgh/angular-file-upload/issues/208)：

/**
   * Converts data uri to Blob. Necessary for uploading.
   * @see
   *   https://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);

我不知道它是否以良好的方式运作,但似乎.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!