【问题标题】:How to concatenate chunked file uploads from Dropzone.js with PHP?如何使用 PHP 连接从 Dropzone.js 上传的分块文件?
【发布时间】:2019-10-03 00:20:58
【问题描述】:

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

到目前为止,我已经能够按应有的方式将要上传的文件分块上传。我将它们全部存储在具有相同“代号”的临时“上传”文件夹中,并在每个名称的末尾附加“-INDEX#”(INDEX# 是正在上传的块 #,由 Dropzone 传递)。

我已将故障隔离到循环通过已上传的块以获取内容的 PHP 部分。具体来说,当我去获取内容时,我尝试使用 PHP 的“真实路径”将块的文件路径保存到一个变量中,以获取绝对路径,并作为文件存在的真/假检查。毫无疑问,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");
}

【问题讨论】:

    标签: php jquery file-upload dropzone.js chunking


    【解决方案1】:

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

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

    Dropzone JS - Chunking

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

    script.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);
            }
         });
      },
    
    });
    

    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
    
    

    【讨论】:

    • 天哪,这为我节省了很多工作,只是搞乱了后勤工作……能够在半天之内就安装好一个临时系统。谢谢!
    • 这很有帮助!但是,我确实必须稍微修改您在每个文件中发送文件名的方式。有时您只发送文件扩展名而不是完整文件名,这导致 realpath 返回 false。
    • 我可以在哪里发布我编辑的代码?我真的不想发布我的答案,因为你的已经足够了。我很乐意将我对此论坛的编辑发送给您。
    • 我是否必须提高 max_post_size 和 max_upload_size 以允许上传大于当前配置值的串联文件?
    猜你喜欢
    • 2018-10-28
    • 2018-09-30
    • 1970-01-01
    • 2019-12-30
    • 1970-01-01
    • 2019-10-01
    • 1970-01-01
    • 2013-10-22
    • 1970-01-01
    相关资源
    最近更新 更多