angular-Datei-Upload mit ngImgCrop

Question

Ich verwende (ngImgCrop), um ein Bild zuzuschneiden und dann das zugeschnittene Bild mit (angular-file-upload) zum Server hochzuladen.

Ich kann die $ DataURI von der "On-Change" -Option in ngImgCrop bekommen. Aber ich brauche eine Datei instace, um $ upload aufzurufen. Wie kann ich die Datei-Instanz des beschnittenen Bildes erhalten, um hochladen:

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

Answer 1

versuchen so etwas wie:

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

der Uploader nicht base64 Bilder unterstützt, so dass Sie konvertieren werden das zugeschnittene Bild von base64

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

to blob Sie müssen die Dateien manuell in die Warteschlange wie folgt anhängen:

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

    }; 

auf der Serverseite haben Sie zwei Dateitypen, die als HTML-Datei und ein anderes un base64 als zugeschnittenes Bild veröffentlicht wurden.

Answer 2

Ich denke, Sie werden eine richtige Antwort in dieser Methode finden. Ich fand es in Github, in der Winkel-Datei-Upload-Themen-Seite (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}); 
    }; 

sollten Sie in der Lage sein, eine Datei Instanz bekommen so etwas wie dies zu tun:

var blob = dataURItoBlob($scope.croppedImage); 

I don‘ Ich weiß, ob es auf die gute Art funktioniert, aber es scheint.