如何将来自 Dropzone.js 的分块文件上传与 PHP 连接起来？
How to concatenate chunked file uploads from Dropzone.js with PHP?
我正在使用 Dropzone.js 获取各种类型的文件（包括图像和非图像，如 PDF），并将它们以 1mb 块的形式上传到我们的服务器。然后我尝试将文件与 PHP 连接起来，然后将它们上传到我们公司的 FileMaker 数据库。
到目前为止，我已经能够让文件以块的形式上传，正如它们应该的那样。我将它们全部存储在一个临时 "uploads" 文件夹中，该文件夹具有相同的 "codename,"，每个名称的末尾都附加了“-INDEX#”（INDEX# 是正在上传的块 #，由 Dropzone 传递）。
我已将故障隔离到 PHP 循环遍历已上传的块以获取内容的部分。具体来说，当我去获取内容时，我试图通过使用 PHP 的 "realpath" 将块的文件路径保存到一个变量中，既获取绝对路径，又作为 true/false 检查文件是否存在。毫无疑问，PHP 无法 "see" 文件。
我不是文件夹权限方面的专家，所以它很有可能与此有关，我只是不知道如何处理它。您会看到我确实在 uploads/ 目录的 PHP 顶部尝试了一个 chmod。
下面我只包含了 PHP 代码，以及 javascript 的 none。我不确定 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");
}
我想通了！问题是我试图在 $chunkIndex == $chunkTotal 时调用连接循环。如果您查看浏览器网络监视器，您会发现块经常以错误的顺序上传，这会使连接在真实路径步骤中失败，因为该文件实际上还不存在（看起来就像几秒钟后我访问了实际文件夹）。为了证明这一点，只需尝试 sleep(5) 给休息时间上传并看到它成功（当然这是一个糟糕的解决方案，但一个快速测试者）。
解决办法是把上传脚本和拼接脚本分开。如果您使用的是 Dropzone.js，则可以按照 link:
中所述从 "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
我正在使用 Dropzone.js 获取各种类型的文件（包括图像和非图像，如 PDF），并将它们以 1mb 块的形式上传到我们的服务器。然后我尝试将文件与 PHP 连接起来，然后将它们上传到我们公司的 FileMaker 数据库。
到目前为止，我已经能够让文件以块的形式上传，正如它们应该的那样。我将它们全部存储在一个临时 "uploads" 文件夹中，该文件夹具有相同的 "codename,"，每个名称的末尾都附加了“-INDEX#”（INDEX# 是正在上传的块 #，由 Dropzone 传递）。
我已将故障隔离到 PHP 循环遍历已上传的块以获取内容的部分。具体来说，当我去获取内容时，我试图通过使用 PHP 的 "realpath" 将块的文件路径保存到一个变量中，既获取绝对路径，又作为 true/false 检查文件是否存在。毫无疑问，PHP 无法 "see" 文件。
我不是文件夹权限方面的专家，所以它很有可能与此有关，我只是不知道如何处理它。您会看到我确实在 uploads/ 目录的 PHP 顶部尝试了一个 chmod。
下面我只包含了 PHP 代码，以及 javascript 的 none。我不确定 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");
}
我想通了！问题是我试图在 $chunkIndex == $chunkTotal 时调用连接循环。如果您查看浏览器网络监视器，您会发现块经常以错误的顺序上传，这会使连接在真实路径步骤中失败，因为该文件实际上还不存在（看起来就像几秒钟后我访问了实际文件夹）。为了证明这一点，只需尝试 sleep(5) 给休息时间上传并看到它成功（当然这是一个糟糕的解决方案，但一个快速测试者）。
解决办法是把上传脚本和拼接脚本分开。如果您使用的是 Dropzone.js，则可以按照 link:
中所述从 "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