HTML5 文件上传块/切片会导致高 CPU 使用率

HTML5 File Upload chunk/slice cause high CPU usage

本文关键字:CPU 使用率 切片 文件 HTML5      更新时间:2023-09-26

所以,我正在为HTML5的大文件实现文件上传器。我正在使用新的切片/块将文件切成更小的块,目的是暂停/恢复以供以后实现。但是,每次我尝试上传(它可以工作),但它需要大量内存和 CPU 使用率(它可能高达 100% CPU 使用率)。我尝试不同大小的块文件,但没有帮助。

有谁知道出了什么问题?以及如何解决它?该应用程序据说能够支持高达4GB/文件,当然多个文件因此可能会达到20GB等。

注意:请不要在解决方案中包含Java或Flash。因为我已经有了java版本。我只是想用HTML5重写它。下面是代码

        function sendRequest() {       
            var file = document.getElementById('fileToUpload');   
            for(var i = 0; i < file.files.length; i++) {      
                var blob = file.files[i];         
                var originalFileName = blob.name;
                var filePart = 0
                const BYTES_PER_CHUNK = 5 * 1024 * 1024; // 10MB chunk sizes.
                const SIZE = blob.size;
                var start = 0;
                var end = BYTES_PER_CHUNK;
                totalChunks = Math.ceil(SIZE / BYTES_PER_CHUNK);
                while( start < SIZE ) {                    
                    if (blob.webkitSlice) {
                        //for Google Chrome
                        var chunk = blob.webkitSlice(start, end); 
                    } else if (blob.mozSlice) {
                        //for Mozilla Firefox
                        var chunk = blob.mozSlice(start, end);
                        //pausecomp(5000);
                    }       
                    uploadFile(chunk, originalFileName, filePart, totalChunks, i);
                    filePart++;
                    start = end;
                    end = start + BYTES_PER_CHUNK;
                }
            }                
        }

        function uploadFile(blobFile, fileName, filePart, totalChunks, divBarsSelector) {
            if(filePart == 0) {
                bars = document.querySelector('#bars' + divBarsSelector);  
            }
            var progress = document.createElement('progress');
            progress.min = 0;
            progress.max = 100;
            progress.value = 0;
            bars.appendChild(progress);   
            var fd = new FormData();
            fd.append("fileToUpload", blobFile);
            var xhr = new XMLHttpRequest();                
            xhr.open("POST", "upload.php"+"?"+"file="+fileName + filePart, true);
            xhr.onload = function(e) {
                //make sure if finish progress bar at 100%
                progress.value = 100;
                //counter if everything is done using stack(pop) / queue(shift)????
                uploaders.shift();
                if (!uploaders.length) {
                    bars.appendChild(document.createElement('br'));
                    bars.appendChild(document.createTextNode('DONE :)'));
                    //mergeFile(fileName, totalChunks);
                }                  
            };
            // Listen to the upload progress for each upload.   
            xhr.upload.onprogress = function(e) {;
                if (e.lengthComputable) {
                    progress.value = (e.loaded / e.total) * 100;
                }
            };                 
            uploaders.push(xhr);
            xhr.send(fd);
}

为了避免这个问题,我们需要使用 webworker 上传文件,通过使用 webworkers,我们可以减少 cpu 使用率。

您可以使用Chrome任务管理器在Chrome中测试带和不带WebWorkers的区别。