Как получить FileSize в первый раз для события onProgress в вызове ajax - PullRequest
Новая
       158

Как получить FileSize в первый раз для события onProgress в вызове ajax

0 голосов
/ 05 августа 2020

Я пытаюсь отобразить прогресс загрузки. Ниже мой поток и то, что я сделал. Нужна помощь в решении вопроса. Спасибо

  • Чтобы получить файл, у нас есть вызов ajax с URL-адресом, обращающимся к бэкэнд-контроллеру. Из бэкэнда мы нажимаем URL-адрес веб-метода, и URL-адрес WM загружает файл на один диск, мы его заархивируем и

  • Затем мы начинаем процесс загрузки заархивированного файла. Проблема в том, что мы не знаем размер файла до тех пор, пока он не загрузится на наш диск и не заархивирован, поэтому после вызова ajax, пока серверная часть выполняется, он быстро возвращается, и я не получаю размер файла, а индикатор выполнения отображается как 0%.

  • Один из способов, который я пробовал, - это дважды вызвать ajax url, который возвращает размер файла, и индикатор выполнения также работает нормально, но это не очень хороший дизайн, поскольку он дважды вызывает бэкэнд-контроллер и загружает заархивированный файл два раз на диске, а также несколько сервисных вызовов (тоже в сети).

  • Я не могу напрямую получить доступ к файлу, который загружается на диск в первый раз.

  • Я вызываю getFileSize () из контроллера и пытаюсь выполнить onProgress, но я не получаю размер файла внутри события.

, поэтому мне нужен способ получить размер файла или что-то onProgress работает с одним сервисным вызовом в соответствии с моими требованиями, которые я упомянул выше. Спасибо

Сервисный файл: OAInvFileService. js. 

function commonInvHttpCall(invSerialNo){                            
    var progress_circle = document.querySelector('.progress-ring');
    var radius = progress_circle.r.baseVal.value;
    var circumference = radius * 2 * Math.PI;

    progress_circle.style.strokeDasharray = `${circumference} ${circumference}`;
    progress_circle.style.strokeDashoffset = `${circumference}`;

    function setProgressPerc(percent) {
      const offset = circumference - percent / 100 * circumference;
      progress_circle.style.strokeDashoffset = offset;
    }   

    var postParams = createPostParamaters(invSerialNo);
    var postParam = postParams.split(";");  
    return $http({
        method: 'POST',
        url: postParam[0],
        data: postParam[1],            
        responseType: 'blob',
        headers : {
            'Content-Type' : 'application/json'
        },
        onProgress: function(event) {
            fileSize = getfileSize();                               
            if( typeof fileSize === 'number'){
                var percentComplete = Math.floor((event.loaded / fileSize) * 100);
                if(percentComplete >= 100){
                    percentComplete = 100;                                                       
                }
                document.querySelector('#cont').setAttribute('data-pct', percentComplete);
                setProgressPerc(percentComplete);
            }
        }
    });
}

function getfileSize(fileSize){             
    return fileSize;
}

OAController. js (контроллер, на котором вызывается вышеуказанная служба): 

function validateOAFiles(invSerialNo) {
    var invSerialNos = checkInvSerialNo(invSerialNo);
    var alphaNumCheck  = checkAlphaNumeric(invSerialNos);
    
    if(invSerialNos != 'undefined' && alphaNumCheck == true) {                              
        var popup_inv = angular.element("#invErrorModal");
        var custHeadervalues = /\[(.*)\]/i;
        OAInvFileDownloadService.commonInvHttpCall(invSerialNos).then(function(result) { 
            $ctrl.fileSize= result.data.size;
            $scope.fileSizess = result.data.size;
            $ctrl.response = result;
            openArrayInvFileDownloadService.getfileSize($ctrl.fileSize);
            angular.element("#progress-popup").modal('show');
            $ctrl.fileName= result.headers("content-disposition").split('filename=').pop().replace(/['"]+/g, '');
            if(result.headers("custom-header")!= null && result.headers("custom-header").match(custHeadervalues)[1] !=''){
                $ctrl.errFileNames= result.headers("custom-header").match(custHeadervalues)[1];
                $ctrl.totalErrFiles = $ctrl.errFileNames.split(",").length;
                $ctrl.disableContinueButton = ($ctrl.totalErrFiles == $ctrl.totalSerials?true:false);
                popup_inv.modal('show');
                $scope.showInvModal = true;
            } else {
                $ctrl.toggle = true;
                //angular.element("#progress-popup").modal('show');
                downloadOAFiles($ctrl.toggle, invSerialNos, $ctrl.fileSize, $ctrl.response);
            }
        }); 
    }   
};
...