Question

大家好，新年快乐：）

我想使用XHR和Web worker上传文件，发送文件块并在最后合并。问题是结束文件是空的，我认为问题是在XHR请求的内容类型中应该发送正确的“multipart / form-data”（当上传一个块时），因为那个PHP print_r（$ _ FILES））返回一个空的Array（），但在web worker中，不可能使用FormData（）。请帮我解决这个问题：'（

的index.html

<form onsubmit="return false" enctype="multipart/form-data">
    <input id="file" type="file">    
    <div id="filedrop">or drop files here</div>
</form>

<script>

window.addEventListener("load", function() {
    var fileselect = document.getElementById("file");   
    fileselect.addEventListener("change", FileSelectHandler, false);

    var filedrag = document.getElementById("filedrop");      
    filedrag.addEventListener("dragover", FileDragHover, false);
    filedrag.addEventListener("dragleave", FileDragHover, false);
    filedrag.addEventListener("drop", FileSelectHandler, false);
}, false);

function FileDragHover(e) {
    e.stopPropagation();
    e.preventDefault(); 
}

function FileSelectHandler(e) {
    FileDragHover(e);

    var blob = e.target.files[0] || e.dataTransfer.files[0];

    worker = new Worker("upload.webworker.js");
    worker.postMessage(blob);

    worker.onmessage = function(e) {
        console.log(e);
    };       
}
</script>

uploadFile.php

<? 

if ($_GET['a'] == "chunk") {
    $target = "upload/" . $_GET['name'] . '-' . $_GET['index'];  
    move_uploaded_file($_FILES['file']['tmp_name'], $target);  
    sleep(1);
 } else {  
    $target = "upload/" . $_GET['name'];
    $dst = fopen($target, 'wb');
    $slices = (int)$_GET['slices'];

    for ($i = 0; $i < $slices; $i++) {
        $slice = $target . '-' . $i;
        $src = fopen($slice, 'rb');
        stream_copy_to_stream($src, $dst);
        fclose($src);
        unlink($slice);
    }

    fclose($dst);
}

?>

upload.webworker.js

function uploadChunk(blob, index, start, end, slices, slices2) {
    var xhr = new XMLHttpRequest();

    xhr.onload = function() {
        slices--;

        if (slices == 0) {
            var xhrMerge = new XMLHttpRequest();            
            xhrMerge.open("POST", "uploadFile.php?a=merge&name=" + blob.name + "&slices=" + slices2);

            xhrMerge.onload = function() {
                self.close();
            };

            xhrMerge.send();
        }
    };

    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) self.postMessage(Math.round(100 / e.total * e.loaded)); //this doesn't work o.O
    };

    var chunk = blob.slice(start, end);

    xhr.open("POST", "uploadFile.php?a=chunk&name=" + blob.name + "&index=" + index); 
    xhr.setRequestHeader("Content-Type", "multipart\/form-data; boundary=--------------------");  
    xhr.send(chunk);
}

self.onmessage = function(e) {
    const BYTES_PER_CHUNK = 1024 * 1024 * 32;

    var blob = e.data,
        start = 0,
        index = 0,
        slices = Math.ceil(blob.size / BYTES_PER_CHUNK),
        slices2 = slices;

    while (start < blob.size) {
        end = start + BYTES_PER_CHUNK;

        if (end > blob.size) end = blob.size;

        uploadChunk(blob, index, start, end, slices, slices2);

        start = end;
        index++;
    }
};

PS：如果你愿意，请告诉我如何优化上传一般=）

PPS：我应该利用同步ajax请求（仅限web工作者）？

PPPS：如果我使用php：//输入来阅读chunk，那会更好吗？

Answer 1

我解决了使用以下代码从php：//输入读取文件：

$putdata = fopen("php://input", "r");
$fp = fopen($target, "w");

while ($data = fread($putdata, 16384)) {
    fwrite($fp, $data);
}

fclose($fp);
fclose($putdata);

通过这种方式，我不需要编写multipart / form-data

的HTTP头

使用XHR和Web worker上载分块文件

1 个答案: