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

6
我正在使用Dropzone.js来上传各种类型的文件(包括图像和非图像文件,如PDF),并将它们分成1MB的块上传到我们的服务器。然后,我尝试使用PHP将这些文件连接起来,并稍后将它们上传到我们公司的FileMaker数据库。
到目前为止,我已经成功地将文件按照应该的方式分成了块并上传。我将它们全部存储在一个临时的“uploads”文件夹中,具有相同的“代号”,每个名称末尾都附加了“-INDEX#”(INDEX#是通过Dropzone传递的上传块数)。
我将故障隔离到了PHP循环遍历已上传的块以获取内容的部分。具体来说,当我尝试获取内容时,我尝试使用PHP的“realpath”将块的文件路径保存到变量中,以获取绝对路径,并作为文件存在的真/假检查。不出意外,PHP无法“看到”该文件。
我不是文件夹权限方面的专家,所以很可能与此有关,并且我不知道如何处理它。您会发现我在uploads/目录的PHP顶部尝试了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");
}

1个回答

15
我明白了!问题在于当 $chunkIndex == $chunkTotal 时,我试图调用连接循环。如果您查看浏览器网络监视器,您会发现经常以错误的顺序上传块,这将导致连接失败,因为在realpath步骤中文件实际上还不存在(当我访问实际文件夹几秒钟后它看起来像存在)。为了证明这一点,只需尝试 sleep(5) 给其他时间上传并看到它成功(当然这是一个不好的解决方案,但是一个快速的测试工具)。 解决方案 是将上传脚本与连接脚本分开。如果您使用Dropzone.js,则可以从“chunksUploaded”触发连接脚本,如此链接所述: Dropzone JS - Chunking 您可以在下面看到最终脚本的外观:
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);
        }
     });
  },

});

chunk-upload.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");

chunk-concat.php

<?php

// get variables
$fileId = $_GET['dzuuid'];
$chunkTotal = $_GET['dztotalchunkcount'];

// file path variables
$ds = DIRECTORY_SEPARATOR;
$targetPath = dirname( __FILE__ ) . "{$ds}uploads{$ds}";
$fileType = $_GET['fileName'];

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

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

/* ========================================
  CONCATENATE UPLOADED FILES
======================================== */

// 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.");

  // copy chunk
  $chunk = file_get_contents($temp_file_path);
  if ( empty($chunk) ) $returnResponse("Chunks are uploading as empty strings.");

  // add chunk to main file
  file_put_contents("{$targetPath}{$fileId}.{$fileType}", $chunk, FILE_APPEND | LOCK_EX);

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

}

/* ========== a bunch of steps I removed below here because they're irrelevant, but I described them anyway ========== */
// create FileMaker record
// run FileMaker script to populate container field with newly-created file
// unlink newly created file
// return success


1
天啊,这真是帮了我大忙,省去了很多琐碎的工作...只用半天时间就能把一个临时系统塞进去。谢谢! - IncredibleHat
这非常有帮助!但是,我确实不得不稍微修改一下你在每个文件中发送文件名的方式。偶尔你只发送文件扩展名而不是完整的文件名,这会导致 realpath 返回 false。 - Rick Scolaro
我可以在哪里发布我的修改后的代码?我其实不想发表我的答案,因为你的已经足够了。我很愿意把我的修改发送给你,供这个论坛使用。 - Rick Scolaro
我是否需要提高max_post_size和max_upload_size以允许上传文件,这些文件串联起来比当前配置的值大? - macbert
@macbert 不是的,这就是为什么存在分块:将大文件切成小块,称为块,应该低于服务器限制,并在服务器上重新组装。服务器上的限制仅适用于用户上传,而不适用于重新组装或服务器端的任何处理。 - GregOriol

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接