如何使用 PHP 连接从 Dropzone.js 上传的分块文件？

Question

如何使用 PHP 连接从 Dropzone.js 上传的分块文件？

Gra*_*Noe 5 php jquery file-upload chunking dropzone.js

我正在使用 Dropzone.js 获取各种类型的文件（包括图像和非图像，如 PDF），并将它们以 1mb 块的形式上传到我们的服务器。然后我尝试用 PHP 连接文件，然后将它们上传到我们公司的 FileMaker 数据库。

到目前为止，我已经能够像他们应该的那样将文件分块上传。我将它们全部存储在具有相同“代号”的临时“上传”文件夹中，并在每个名称的末尾附加“-INDEX#”（INDEX# 是正在上传的块 #，由 Dropzone 传递）。

我已经将失败隔离到 PHP 循环遍历已经上传的块以获取内容的部分。具体来说，当我去获取内容时，我尝试使用 PHP 的“realpath”将块的文件路径保存到一个变量中，以获取绝对路径，并作为文件存在的真/假检查。毫无疑问，PHP 无法“看到”该文件。

我不是文件夹权限方面的专家，因此很有可能与此有关，而我只是不知道如何处理它。您会看到我确实在 PHP 顶部的 uploads/ 目录中尝试了 chmod。

我只包含了下面的 PHP 代码，没有包含任何 javascript。我不确定 JS 是否相关，因为它显然与实际的块上传工作得很好。

下面的 PHP 文件与块要结束的uploads/ 文件夹位于同一目录中。

<?php

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

/* ========================================
  VARIABLES
======================================== */

// chunk variables
$fileId = $_POST['dzuuid'];
$chunkIndex = $_POST['dzchunkindex'] + 1;
$chunkTotal = $_POST['dztotalchunkcount'];

// file path variables
$ds = DIRECTORY_SEPARATOR;
$targetPath = dirname( __FILE__ ) . "{$ds}uploads{$ds}";
$fileType = strtolower(pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION));
$fileSize = $_FILES["file"]["size"];
$filename = "{$fileId}-{$chunkIndex}.{$fileType}";
$targetFile = $targetPath . $filename;

// change directory permissions
chmod(realpath($targetPath), 0777);

/* ========================================
  DEPENDENCY FUNCTIONS
======================================== */

$returnResponse = function ($info = null, $filelink = null, $status = "error") {
  die (json_encode( array(
    "status" => $status,
    "info" => $info,
    "file_link" => $filelink
  )));
};

/* ========================================
  VALIDATION CHECKS
======================================== */

// I removed all the validation code here. They just prevent upload, so assume the upload is going through.

/* ========================================
  CHUNK UPLOAD
======================================== */

move_uploaded_file($_FILES['file']['tmp_name'], $targetFile);

// Be sure that the file has been uploaded
if ( !file_exists($targetFile) ) $returnResponse("An error occurred and we couldn't upload the requested file.");

/* ========================================
  FINAL UPLOAD CONDITIONAL
======================================== */

if ( $chunkIndex == $chunkTotal ) {

  // ===== concatenate uploaded files =====
  // set emtpy string for file content concatonation
  $file_content = "";
  // loop through temp files and grab the content
  for ($i = 1; $i <= $chunkTotal; $i++) {

    // target temp file
    $temp_file_path = realpath("{$targetPath}{$fileId}-{$i}.{$fileType}") or $returnResponse("Your chunk was lost mid-upload.");
    // ^^^^^^^ this is where the failure is occurring, $i = 1, so first iteration

    // copy chunk...you'll see a bunch of methods included below that I've tried, but the simplest one is method 3, so I've tested mostly there
    // method 1
    /*$temp_file = fopen($temp_file_path, "rb") or $returnResponse("The server cannot open your chunks");
    $chunk = base64_encode(fread($temp_file, $fileSize));
    fclose($temp_file);
    // method 2
    $chunk = base64_encode(stream_get_contents($temp_file_path, $fileSize));*/
    // method 3
    $chunk = base64_encode(file_get_contents($temp_file_path));

    // check chunk content
    if ( empty($chunk) ) $returnResponse("Chunks are uploading as empty strings.");

    // add chunk to main file
    $file_content .= $chunk;

    // delete chunk
    unlink($temp_file_path);
    if ( file_exists($temp_file_path) ) $returnResponse("Your temp files could not be deleted.");

    continue;

  }
  // create and write concatonated chunk to the main file
  file_put_contents("{$targetPath}{$fileId}.{$fileType}", base64_decode($file_content));
// other method of adding contents to new file below, but the one above seemed simpler
  //$final = fopen("{$target_file}.{$fileType}", 'ab');
  //fwrite($final, base64_decode($file_content));
  //fclose($final);

  // create new FileMaker code removed here, irrelevant
// run FileMaker script to populate container field with concatenated file code removed here, irrelevant
// somewhere in the code above, if everything succeeds, I unlink the concatenated file so that it's not cluttering my "uploads" folder, but I never get this far

} else {
  $returnResponse(null, null, "success");
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Gra*_*Noe 9

我想到了！问题是我试图在 $chunkIndex == $chunkTotal 时调用连接循环。如果您查看浏览器网络监视器，您会发现块通常以错误的顺序上传，这会使 realpath 步骤中的连接失败，因为该文件实际上还不存在（它看起来就像在几秒钟后我访问了实际文件夹）。为了证明这一点，只需尝试 sleep(5) 给其余时间上传并查看它是否成功（当然这是一个糟糕的解决方案，但是一个快速的测试程序）。

解决方案是将上传脚本与串联脚本分开。如果您使用的是 Dropzone.js，您可以从“chunksUploaded”触发连接脚本，如以下链接所述：

Dropzone JS - 分块

您可以在下面看到最终脚本的外观：

脚本.js

var myDropzone = new Dropzone(target, {
  url: ($(target).attr("action")) ? $(target).attr("action") : "../../chunk-upload.php", // Check that our form has an action attr and if not, set one here
  maxFilesize: 25, // megabytes
  chunking: true,
  parallelUploads: 1,
  parallelChunkUploads: true,
  retryChunks: true,
  retryChunksLimit: 3,
  forceChunking: true,
  chunkSize: 1000000,
  acceptedFiles: "image/*,application/pdf,.doc,.docx,.xls,.xlsx,.csv,.tsv,.ppt,.pptx,.pages,.odt,.rtf,.heif,.hevc",
  previewTemplate: previewTemplate,
  previewsContainer: "#previews",
  clickable: true,
  autoProcessQueue: false,
  chunksUploaded: function(file, done) {
    // All chunks have been uploaded. Perform any other actions
    let currentFile = file;

    // This calls server-side code to merge all chunks for the currentFile
    $.ajax({
        url: "chunk-concat.php?dzuuid=" + currentFile.upload.uuid + "&dztotalchunkcount=" + currentFile.upload.totalChunkCount + "&fileName=" + currentFile.name.substr( (currentFile.name.lastIndexOf('.') +1) ),
        success: function (data) {
            done();
        },
        error: function (msg) {
            currentFile.accepted = false;
            myDropzone._errorProcessing([currentFile], msg.responseText);
        }
     });
  },

});

Run Code Online (Sandbox Code Playgroud)

块上传.php

var myDropzone = new Dropzone(target, {
  url: ($(target).attr("action")) ? $(target).attr("action") : "../../chunk-upload.php", // Check that our form has an action attr and if not, set one here
  maxFilesize: 25, // megabytes
  chunking: true,
  parallelUploads: 1,
  parallelChunkUploads: true,
  retryChunks: true,
  retryChunksLimit: 3,
  forceChunking: true,
  chunkSize: 1000000,
  acceptedFiles: "image/*,application/pdf,.doc,.docx,.xls,.xlsx,.csv,.tsv,.ppt,.pptx,.pages,.odt,.rtf,.heif,.hevc",
  previewTemplate: previewTemplate,
  previewsContainer: "#previews",
  clickable: true,
  autoProcessQueue: false,
  chunksUploaded: function(file, done) {
    // All chunks have been uploaded. Perform any other actions
    let currentFile = file;

    // This calls server-side code to merge all chunks for the currentFile
    $.ajax({
        url: "chunk-concat.php?dzuuid=" + currentFile.upload.uuid + "&dztotalchunkcount=" + currentFile.upload.totalChunkCount + "&fileName=" + currentFile.name.substr( (currentFile.name.lastIndexOf('.') +1) ),
        success: function (data) {
            done();
        },
        error: function (msg) {
            currentFile.accepted = false;
            myDropzone._errorProcessing([currentFile], msg.responseText);
        }
     });
  },

});

Run Code Online (Sandbox Code Playgroud)

块-concat.php

<?php

/* ========================================
  VARIABLES
======================================== */

// chunk variables
$fileId = $_POST['dzuuid'];
$chunkIndex = $_POST['dzchunkindex'] + 1;
$chunkTotal = $_POST['dztotalchunkcount'];

// file path variables
$ds = DIRECTORY_SEPARATOR;
$targetPath = dirname( __FILE__ ) . "{$ds}uploads{$ds}";
$fileType = strtolower(pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION));
$fileSize = $_FILES["file"]["size"];
$filename = "{$fileId}-{$chunkIndex}.{$fileType}";
$targetFile = $targetPath . $filename;

// change directory permissions
chmod(realpath($targetPath), 0777) or die("Could not modify directory permissions.");

/* ========================================
  DEPENDENCY FUNCTIONS
======================================== */

$returnResponse = function ($info = null, $filelink = null, $status = "error") {
  die (json_encode( array(
    "status" => $status,
    "info" => $info,
    "file_link" => $filelink
  )));
};

/* ========================================
  VALIDATION CHECKS
======================================== */

// blah, blah, blah validation stuff goes here

/* ========================================
  CHUNK UPLOAD
======================================== */

move_uploaded_file($_FILES['file']['tmp_name'], $targetFile);

// Be sure that the file has been uploaded
if ( !file_exists($targetFile) ) $returnResponse("An error occurred and we couldn't upload the requested file.");
chmod($targetFile, 0777) or $returnResponse("Could not reset permissions on uploaded chunk.");

$returnResponse(null, null, "success");

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，5 月前
查看次数：	3921 次
最近记录：	6 年，5 月前