如何使用 XMLHttpRequest 在 javascript 中将压缩的 blob 数据上传到服务器？答案

【问题标题】：How to upload zipped blob data to server in javascript using XMLHttpRequest?如何使用 XMLHttpRequest 在 javascript 中将压缩的 blob 数据上传到服务器？
【发布时间】：2020-06-28 05:39:18
【问题描述】：

我正在尝试上传一个由 JSZip() 生成的 zip 文件 blob。如果我放置文本（作为“文件数据”）而不是 blob（zip 数据），则以下代码可以正常工作。如果我尝试上传压缩的 blob，我总是会收到此错误“文件数据不存在！”。我认为我不会错过任何关于谷歌的帖子来解决这个问题，但没有任何效果。我有足够的 PHP 上传限制，所以这不是问题。即使我尝试上传 kb 大小的压缩图像，它也不起作用。

我正在使用 NodeJs 和 VSCode。我真的很感激这个解决方案。谢谢。

客户端（Javascript）：

const req = new XMLHttpRequest();
req.responseType = 'blob';
const formData = new FormData();
formData.append('filename', fileName);
formData.append('filedata', blob, fileName);
req.open(
'POST',
'xyz.com/data/savedata.php',
true
);
req.upload.onprogress = function(e) {
if (e.lengthComputable) {
  const percentComplete = (e.loaded / e.total) * 100;
  console.log(percentComplete);
}
};

req.send(formData);

服务器端（savedata.php）：

<?php
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
    header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

    $filename = $_POST['filename'];
    $filedata = $_POST['filedata'];
    
    $dataTime = date("Y-m-d h:m:s");
    
    if ( isset($_POST['filename']) ) {
        error_log ("$dataTime  FileName '$filename' exists!\n", 3, 'logs.txt');
    } else {
        $filename = "DataFile.zip";
        error_log ("$dataTime  FileName does not exists! A New name is created.\n", 3, 'logs.txt');
    }
    
    if ( isset($_POST['filedata']) ) {
        error_log ("$dataTime  File data exists!\n", 3, 'logs.txt');
    
        $file = fopen($filename, 'wb');
        
        if ($file !== false) {
            if (fwrite($file, $filedata)) {
                error_log ("$dataTime  File has been written successfully!\n", 3, 'logs.txt');
                fclose($file);
            }
        } else {
            error_log ("$dataTime  Could not open '$filename' file!\n", 3, 'logs.txt');
        }
    } else {
        error_log ("$dataTime  filedata does not exists!\n", 3, 'logs.txt');
    }
?>

【问题讨论】：

标签： javascript php node.js post vuetify.js

【解决方案1】：

我不太擅长 PHP，但我认为您应该使用以下方式访问文件：

if ( isset($_FILES['filedata'] ) {
   move_uploaded_file( $_FILES['userFile']['tmp_name'], "Desired Directory");
}

更多信息请参见this

【讨论】：