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

所以，我正在用HTML5实现大文件的文件上传程序。我使用新的slice/chunk将文件分割成更小的块，目的是暂停/恢复以供以后实现。 然而，每次我尝试上传（它工作），但它需要大量的内存和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);
}

函数sendRequest（）{
var file=document.getElementById（'fileToUpload'）；
对于（var i=0；i

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

---

您可以使用chrome taskmanager测试在chrome中使用和不使用webworkers的差异。

目前，切片循环开始上载每个块，而无需等待前一个块完成。你的切片循环应该等到上传程序完成当前块后，再开始下一个块的上传。我遇到了同样的问题，我正在使用WebSocket，只在收到块后发送更多块，但我仍然在做一些事情wrong@DanD. 你是说现在http请求在切片之后直接发送到服务器，我应该按顺序而不是并行地发送每个请求？你有示例代码吗？因为我不知道怎么做。感谢you@Harts如果您使用的是websockets，那么当区块到达服务器并完成处理时，您可能会触发事件。对于php，我不确定，您可以使用EventSource（服务器发送的事件）执行相同的操作，或者使用setTimeout延迟发送事件chunk@andrei在你之前的评论中，“但我还是做错了什么”这是什么意思？