Question

在上传大于maxChunkSize的文件时，我们如何在服务器中单独访问每个上传的文件blob？

我的问题是我需要使用后端api将上传的文件转发到不同的服务器中。

到目前为止，查看wiki，对于1 mb的块，我在js中添加了以下内容：

$('#fileupload').fileupload({
    url: 'server/php/',
    maxChunkSize: 1000000 // 1 MB
});

但上传完成后，我在服务器中看到完整的合并文件：

server/php/files

我们如何访问服务器上的各个blob？

我没有对默认文件server/php/index.php进行任何更改：

error_reporting(E_ALL | E_STRICT);
require('UploadHandler.php');
$upload_handler = new UploadHandler();

和

中的默认UploadHandler类

server/php/UploadHandler.php

（https://github.com/blueimp/jQuery-File-Upload/blob/master/server/php/UploadHandler.php）。文件太大，无法放在这里。

我尝试添加fileuploadchunkdone选项，但我不确定，我们如何访问服务器中的文件blob-也就是说，这是正确的方法。

$('#fileupload').fileupload({
    url: 'server/php/',
    maxChunkSize: 1000000 // 1 MB
})
.on('fileuploadchunkdone', function (e, data) {
    console.log('chunkdone')
    console.log(e)
    console.log(data)
});

Answer 1

分块上传有2个要求

javascript to chunking（拆分某些字节）文件
PHP保存并合并文件。通常使用：FILE_APPEND

我不知道你想要什么块文件。在客户端或服务器中？

如果您想获得将要发送的块，您需要检查fileuploadchunksend
如果您想获得已完成上传的块，则需要检查fileuploadchunkdone

从您的问题标题中，我假设您需要获取已在服务器上传的块文件。

所以我们使用此页面https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

<强> HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
<style>
.bar {
    height: 18px;
    background: green;
}
</style>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
            //console.log(progress);
        },
        maxChunkSize: 50000 // i prefer 50 Kb, because my file is only 190Kb (4 step)
    })
    .on('fileuploadchunksend', function (e, data) {
        console.log('send');
    })
    .on('fileuploadchunkdone', function (e, data) {
        console.log('done');
        console.log(data.result);
        //forceerror; wrong javascript function to make error so file upload will stopped. and we can start debugging
    })
    .on('fileuploadchunkfail', function (e, data) {
        console.log('fail');
        console.log(data);
    })
    .on('fileuploadchunkalways', function (e, data) {
        console.log('always');
    });
});
</script>
</body> 
</html>

然后我们编辑php文件：server/php/UploadHandler.php

第1061行

protected function handle_file_upload($uploaded_file, $name, $size, $type, $error,
            $index = null, $content_range = null) {
....
            if ($uploaded_file && is_uploaded_file($uploaded_file)) {
                // multipart/formdata uploads (POST method uploads)
                $path_parts = pathinfo($file_path); //new
                $chunkFileName = $path_parts['dirname'].'/'.$path_parts['filename'].'_'. $content_range[1]."_". $content_range[2].".".$path_parts['extension'];//new
                if ($append_file) {
                    file_put_contents($chunkFileName,  file_get_contents($uploaded_file));//new
                    file_put_contents(
                        $file_path,
                        fopen($uploaded_file, 'r'),
                        FILE_APPEND
                    );
                } else {
                    file_put_contents($chunkFileName,  file_get_contents($uploaded_file));//new
                    move_uploaded_file($uploaded_file, $file_path);
                }
            } else {
                // Non-multipart uploads (PUT method support)
....

完整代码：https://pastebin.com/3AsHbkqQ（我只需添加4行来获取块）

现在让我们尝试代码。我尝试使用50kb块上传196kb dummy.png。（这将在4步中处理）

上传dummy.png文件后：现在你将获得5个文件：

dummy.png //完整档案
dummy_0_49999.png //第一块
dummy_50000_99999.png //第二块
dummy_100000_149999.png //第3块
dummy_150000_196064.png // last chunk

然后你可以用这个块做任何事情

注意：根据我的经验，请使用blueimp迁移到plupload。你可以在你的问题下面阅读我的评论。

我们如何访问服务器中的文件blob？

1 个答案: