Question

所以，我正在使用HTML5为大文件实现File Uploader。我正在使用新的切片/块将文件切割成较小的块，目的是暂停/恢复以便以后实现。但是，每次我尝试上传（它的工作），但它需要大量的内存和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);
}

Answer 1

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

您可以使用chrome taskmanager测试chrome中有和没有webworkers的区别。

HTML5文件上载块/片导致高CPU使用率

1 个答案: