Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
318 views
in Technique[技术] by (71.8m points)

javascript - Request Timeout on AngularJS when uploading large file

I am uploading a large file to be processed on the server usinng AngularJS frontend. After uploading the file I see a preview of the processed file. When I click on confirm button to make second request I am getting following error in the chrome network logs and the request is not received by the server.

(failed)net::ERR_CONNECTION_RESET

Versions JAVA :- 1.8_275 AngularJS :- 1.2.20 NGINX :- 1.16.1 CHROME :- Version 87.0.4280.88

My Angular Code is as follows

helloApp
    .controller(
        "HttpController",
        [
            '$scope',
            '$http',
            '$window',
            '$location',
            function($scope, $http, $window, $location) {
                $scope.pagesize = 50;
                $scope.uploadresponse = {};
                $scope.failmessage = '';
                $scope.message = '';
                $scope.myVar = true;
                $scope.nonchars = '^|a??{}[]~\';
                $scope.dsm = false;
                $scope.uploadSMSAndRecipients = function() {
                    $('#smsrecordsverified').hide();
                    $('#bulkuploadfail').hide();
                    // $('#LoadingImageDiv').show();
                    $('#LoadingImageDivCancel').show();
                    $("#startupload").attr("disabled", true);

                    $('#downloadsamplefile').hide();
                    $("#inputfile").attr("disabled", true);
                    // $('#cancelProcessDiv').show();
                    var file = $scope.bulksmsfile;
                    console.log('file is ');
                    console.dir(file);
                    var uploadUrl = contextPath
                        + '/clientres/uploadSMSfile?dsm=' + $scope.dsm;
                    // fileUpload.uploadFileToUrl(file, uploadUrl);

                    //
                    var fd = new FormData();
                    fd.append('file', file);
                    var config = {
                                transformRequest: angular.identity,
                                headers: {
                                    'Content-Type': undefined
                                },
                                'timeout' : 300000
                            };
                            
                    $http
                        .post(
                            uploadUrl,
                            fd,
                            config)
                        .success(
                            function(data) {
                                console.log("success");
                                if (data != '') {/*
                                                                         * $scope.uploadresponse =
                                                                         * data; //
                                                                         * console.log($scope.uploadresponse.batch.length);
                                                                         * $('#LoadingImageDiv')
                                                                         * .hide();
                                                                         * $('#uploadbulksmsdiv')
                                                                         * .hide();
                                                                         * $('#smsrecords').hide();
                                                                         * if
                                                                         * ($scope.uploadresponse.nonSMSChars) { $(
                                                                         * "#msgdetailspopup1")
                                                                         * .modal(); }
                                                                         * else { $(
                                                                         * '#smsrecordsverified')
                                                                         * .show(); }
                                                                         */

                                    if (data.failMessage == ''
                                        || data.failMessage == null) {

                                        $scope.uploadresponse = data;
                                        // console.log($scope.uploadresponse.batch.length);
                                        $(
                                            '#LoadingImageDivCancel')
                                            .hide();

                                        /*
                                         * $(
                                         * '#cancelProcessDiv')
                                         * .hide();
                                         */
                                        $(
                                            '#downloadsamplefile')
                                            .hide();
                                        $("#startupload")
                                            .attr(
                                                "disabled",
                                                false);
                                        $("#inputfile")
                                            .attr(
                                                "disabled",
                                                false);
                                        $(
                                            '#uploadbulksmsdiv')
                                            .hide();
                                        $('#smsrecords')
                                            .hide();
                                        if ($scope.uploadresponse.nonSMSChars) {
                                            $(
                                                "#msgdetailspopup1")
                                                .modal();
                                        } else {
                                            $(
                                                '#smsrecordsverified')
                                                .show();
                                        }
                                    } else {
                                        $(
                                            '#LoadingImageDivCancel')
                                            .hide();
                                        /*
                                         * $(
                                         * '#cancelProcessDiv')
                                         * .hide();
                                         */
                                        $(
                                            '#downloadsamplefile')
                                            .show();
                                        $("#startupload")
                                            .attr(
                                                "disabled",
                                                false);
                                        /*
                                         * $(
                                         * "#downloadsamplefile")
                                         * .attr(
                                         * "disabled",
                                         * false);
                                         */
                                        $("#inputfile")
                                            .attr(
                                                "disabled",
                                                false);
                                        $scope.failmessage = data.failMessage;
                                        $('#bulkuploadfail')
                                            .show();
                                    }

                                } else {
                                    $(
                                        '#LoadingImageDivCancel')
                                        .hide();/*
                                                                         * $('#cancelProcessDiv')
                                                                         * .hide();
                                                                         */
                                    $('#downloadsamplefile')
                                        .show();
                                    $("#startupload").attr(
                                        "disabled",
                                        false);
                                    /*
                                     * $(
                                     * "#downloadsamplefile")
                                     * .attr( "disabled",
                                     * false);
                                     */
                                    $("#inputfile").attr(
                                        "disabled",
                                        false);
                                    $scope.failmessage = 'Failed to upload the file.Please try again.';
                                    $('#bulkuploadfail')
                                        .show();

                                }

                                /*
                                 * $scope.paidLearners =
                                 * data;
                                 * console.log($scope.paidLearners.length);
                                 * $('#LoadingImageDiv').hide();
                                 * $('#addPaidLearner').hide();
                                 * $('#successpanel').hide();
                                 * $('#bulkuploadsuccess').show();
                                 */
                            })
                        .error(
                            function(data) {
                                console.log("error");
                                // $scope.failmessage =
                                // 'Something went
                                // wrong.Please try again.';
                                if ($scope.filesize != '')
                                    $scope.failmessage = $scope.filesize;
                                else

                                    $scope.failmessage = 'Something went wrong.Please try again.';
                                $('#downloadsamplefile')
                                    .show();
                                $("#startupload").attr(
                                    "disabled", false);
                                /*
                                 * $( "#downloadsamplefile")
                                 * .attr( "disabled",
                                 * false);
                                 */
                                $("#inputfile").attr(
                                    "disabled", false);
                                $('#bulkuploadfail').show();
                                $('#LoadingImageDivCancel')
                                    .hide();
                                $('#cancelProcessDiv')
                                    .hide();
                                // $('#failpanel').show();
                            });

                

$scope.showUpload = function() {
                    /*
                     * $('#uploadbulks

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...