您如何将 Dropzone.js 用于分块文件上传(仅限 PHP)?

How do you use Dropzone.js with chunked file uploads (PHP only)?

我可以找到大量关于如何将分块文件上传与各种 API 和库一起使用的文档,但我无法找到如何使用 Dropzone.js 分块文件上传普通 PHP.

文档非常少。我无法在客户端 (JavaScript) 添加任何库或 API,但 jQuery 除外。

我的问题是如何仅在服务器端使用 Dropzone.js 新的分块文件上传功能和 PHP。 (感谢客户端代码的设置)。

这是我到目前为止尝试过的代码: 客户端 .js 文件:

    var myDropzone = new Dropzone("div#formDiv", 
    {
        url: "uploadform.php",
        params: function (files, xhr, chunk)
        {
            if (chunk)
            {
                return
                {
                    dzUuid=chunk.file.upload.uuid,
                    dzChunkIndex=chunk.index,
                    dzTotalFileSize=chunk.file.size,
                    dzCurrentChunkSize=chunk.dataBlock.data.size,
                    dzTotalChunkCount=chunk.file.upload.totalChunkCount,
                    dzChunkByteOffset=chunk.index * this.options.chunkSize,
                    dzChunkSize=this.options.chunkSize,
                    dzFilename=chunk.file.name;
                };
            }
        },
        method: "post",
        timeout: 600000,
        maxFileSize: 1024,
        parallelUploads: 1,
        chunking: true,
        forceChunking: true,
        chunkSize: 1000000,
        parallelChunkUploads: true,
        retryChunks: true,
        retryChunksLimit: 3,
        chunksUploaded: function (file, done)
        {
            // All chunks have uploaded successfully

        },
        error: function (msg)
        {
            alert(msg.responseText);
        }
});

这里是PHP(服务器):

foreach ($_POST as $key => $value)
{
    _log('key:' . $key . '; Value:' . $value);
}

以上代码没有显示任何内容(_log() 只是将其回显到屏幕上并将其记录在文本文件中)。

我查看了 send/receive headers,它只向服务器发送了一个调用。

我已经通过 Dropzone.js 使用浏览器中的开发人员工具控制台验证了文件 drag/drop 区域的设置是否正确。

编辑:这是分块上传的文档:https://gitlab.com/meno/dropzone/wikis/faq#chunked-uploads

Chunked uploads

Dropzone offers the possibility to upload files in chunks. The relevant configuration options for this feature are:

chunking which should be set to true

forceChunking, if true, will always send a file in chunks, even if it is only one chunk

chunkSize in bytes

parallelChunkUploads, if true, the chunks will be uploaded simultaneously

retryChunks, if true, the library will retry to upload a chunk if it fails

retryChunksLimit defaults to 3

Then there are two important callbacks. The first one is: params which can be a function, that receives files, xhr and chunk as the first argument. If chunking is enabled, you know that files only contains that one file, and chunk is the object holding all the information about the current chunk. Example:

var chunk = {
  file: file,
  index: 0,
  status: Dropzone.UPLOADING,
  progress: 0.4
}

See the documentation for that parameter for more information or look at the source code for the default implementation.

The second important callback is chunksUploaded, which gets the file that finished uploading and the done function as second argument. Do whatever you need to do in that function, to tell the server that the file finished uploading and invoke the done() function when ready.

我发现我有很多问题。一是我没有使用最新版本的 Dropzone.js。

另一个是我没有检查变量和文件部分的 $_FILE 和 $_POST。

修复这些问题后,我将 JavaScript 更改为:

    var myDropzone = new Dropzone("div#formDiv", 
    {
        url: "uploadform.php",
        method: "post",
        timeout: 180000,
        maxFileSize: 1024,
        parallelUploads: 1,
        chunking: true,
        forceChunking: true,
        chunkSize: 256000,
        parallelChunkUploads: true,
        retryChunks: true,
        retryChunksLimit: 3,
    };

通过删除 params 函数,我得到了默认值。这些值包括块索引和最大块数。

从那里我能够使用 PHP 脚本获取分块文件:

$_FILE['file']['name']
$_FILE['file']['tmp_name']
$_POST['dzchunkindex']
$_POST['dztotalchunkcount']

之后,只需在 PHP 脚本中检查所有正在上传的文件部分,然后重新组装它们,这在互联网上很容易找到的许多教程中都有处理。