ъглово-качване на файлове с ngImgCrop - angularjs, upload

Аз използвам (ngImgCrop), за да изрежете изображение и след това да качите изрязаното изображение на сървъра, като използвате (ъглово-файл за качване).

Мога да получа $ dataURI от опцията "on-change" в ngImgCrop. Но имам нужда от File instace, за да се обадя $ upload. Как мога да получа екземпляр на файла на изрязаното изображение, за да се качи:

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

Отговори:

Предполагам, че ще намерите подходящ отговор в този метод. Намерих го в Github, в страницата с въпроси за качване на файлове с ъглови (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);

Не знам дали работи добре, но изглежда.

опитайте нещо като:

 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 файл и друг un base64, който е изрязаното изображение.