如何使用 AJAX 将八位字节/流类型的 Blob 发送到服务器？

Question

我尝试使用 AJAX 向服务器发送 Blob 文件（.OBJ 文件类型）失败。我希望能够在不使用输入文件字段的情况下做到这一点。我正在制作一个在线头像创建者，因此要发送到服务器的 Blob 文件是从最初导入到我的 Three.js 场景中的角色生成的。我已经能够将包含字符串的 Blob 文件发送到服务器并将其保存到指定的文件夹（我的目标是使用 Blob .OBJ 文件）。在将 Blob 发送到 POST 请求中之前，我曾尝试将其转换为 Base64，但这不起作用。我尝试发送的文件大小为 3MB。

这是我的 JavaScript 代码，用于创建 Blob 文件并使用 AJAX 将其发送到服务器上的 PHP 脚本。

//Create OBJ
var exporter = new THREE.OBJExporter();
var result = exporter.parse(child);

//Generate file to send to server
var formData = new FormData();
var characterBlob = new Blob([result], {type: "octet/stream"});

var reader = new FileReader();
reader.readAsDataURL(characterBlob);
reader.onloadend = function() {
formData.append('file', reader.result);

    $.ajax({
    url: "ExecuteMaya.php", // Url to which the request is send
    type: "POST",             // Type of request to be send, called as method
    data: formData, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
    processData:false,        // To send DOMDocument or non processed data file it is set to false
    contentType: false,       // The content type used when sending data to the server
    }).done(function(data) {
        console.log(data);
    });
}

这是我处理发送文件的 PHP 脚本。

<?php

$sourcePath = $_FILES['file']['tmp_name'];       // Storing source path of the file in a variable
$targetPath = "upload/".$_FILES['file']['name']; // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ;    // Moving Uploaded file
echo "<span id='success'>Image Uploaded Successfully...!!</span><br/>";
echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>";
echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>";
echo "<b>Size:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>";

?>

任何帮助将不胜感激！

更新 1：var result = exporter.parse(child); 是一个字符串，每当我将此变量打印到控制台时，都需要几分钟才能加载。尝试将其发送到服务器时，此字符串的大小是否会成为问题？

更新 2：在执行 PHP 脚本后，这会打印到控制台，这让我认为要么没有任何东西被发送到服务器，要么 PHP 脚本没有正确处理发送的数据。

图片上传成功...！！

文件名：
类型：
大小： 0 kB
临时文件：

更新 3：这是我要发送的文件的链接。 http://www.filehosting.org/file/details/578744/CleanFemaleOBJ.obj

您可以在 TextEdit/NotePad 中查看此文件以查看我要发送的字符串。它几乎是一个带有 .obj 扩展名的文本文件，可以将其转换为该格式，以便可以在 Maya 中打开。

更新 4：我现在更改了我的 JavaScript 代码，以便将 Blob 附加到 FormData 而不是 reader.readAsDataURL(characterBlob) 的结果。

//Create OBJ
var exporter = new THREE.OBJExporter();
var result = exporter.parse(child);

//Generate file to send to server
var formData = new FormData();
var characterBlob = new Blob([result], {type: "octet/stream"});
formData.append('file', result);                            

    $.ajax({
    url: "ExecuteMaya.php", // Url to which the request is send
    type: "POST", // Type of request to be send, called as method
    data: formData, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
    processData: false, // To send DOMDocument or non processed data file it is set to false
    }).done(function(data) {
        console.log(data);
    });

Answer 1

使用以下代码，我能够上传.obj 文件。

我必须 increase my maximum upload size 才能工作。

您可能还想增加您的最长执行时间，如下所述，但我没有这样做。

为简单起见，我将所有内容放在一个名为 form.php 的文件中。

form.php

<?php
// good idea to turn on errors during development
error_reporting(E_ALL);
ini_set('display_errors', 1);

// ini_set('max_execution_time', 300);

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>";
    echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>";
    echo "<b>Size:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
    echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>";
    echo "<b>Error:</b> " . $_FILES["file"]["error"] . "<br>";

    $sourcePath = $_FILES['file']['tmp_name'];          // Storing source path of the file in a variable
    $targetPath = "uploads/" . $_FILES['file']['name'];    // Target path where file is to be stored
    if (move_uploaded_file($sourcePath, $targetPath)) { // Moving Uploaded file
        echo "<span id='success'>Image Uploaded Successfully...!!</span><br/>";
    } else {
        echo "<span id='success'>Image was not Uploaded</span><br/>";
    }
    exit;
}
?>

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
    <form action="form.php" method="post" enctype="multipart/form-data">
        <label>File</label>
        <input type="file" name="file">
        <input type="submit" value="Upload"> 
    </form>
    <div></div>
</body>
<script>
$(function () {
    $('form').on('submit', function (e) {
        e.preventDefault();
        // logic
        $.ajax({
            url: this.action,
            type: this.method,
            data: new FormData(this), // important
            processData: false, // important
            contentType: false, // important
            success: function (res) {
                $('div').html(res);
            }
        });
    });
});
</script>
</html>

所以，首先测试一下是否可以使用上面的代码上传.obj文件。

在进行测试时，请打开浏览器的开发者工具。监控您的网络/XHR 选项卡 [Chrome, Firefox] 以查看您单击上传时发出的请求。

如果可行，请尝试在原始代码中使用相同的逻辑。

var formData = new FormData();
formData.append('file', result);   

$.ajax({
    url: "ExecuteMaya.php",
    type: "post",
    data: formData, // important
    processData: false, // important
    contentType: false, // important!
    success: function (res) {
        console.log(res);
    }
});

再次，监控在您的 Network/XHR 选项卡中发出的请求并查看发送的内容。