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

Question

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

我的问题是我需要使用后端 api.

将单独的 blob 中的上传文件转发到不同的服务器

到目前为止，查看 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 class

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 对文件进行分块（拆分某些字节）
PHP 保存并合并文件。常用：FILE_APPEND

我不知道你想得到什么块文件。在客户端还是服务器？

如果你想得到要发送的块，你需要检查fileuploadchunksend
如果要获取上传完成的chunk，需要检查fileuploadchunkdone

From your question title, i assume you need to get chunk file which is already uploaded in the server.

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

中的基本 html

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 //第三块
dummy_150000_196064.png //最后一块

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

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

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

How do we access file blobs in the server?

php

jquery

file-upload

jquery-file-upload