如何在 PHP 中访问使用 javascript vanilla 发送的 FormData

Question

我有一个将canvas保存到blob file中的简单程序，我试图在php中检索它，但我无法访问它。

我的console.log(FormData)确实正确显示了blob文件内容。

HTML：

<form id="formId">
    <button id="click-photo" type="submit" value="submit">Click Photo</button>
    <canvas id="canvas" width="320" height="240"></canvas>
</form>

JavaScript：

form.addEventListener('submit', function(e) {

    e.preventDefault();
    
    var xhr = new XMLHttpRequest();
    var image_data_url = "";
    xhr.open('POST', 'image.php', true);
    if(xhr.readyState === XMLHttpRequest.DONE) {
        var status = xhr.status;
        if (status === 0 || (status >= 200 && status < 400)) {
            alert(xhr.reponseText);
        };
    };
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    image_data_url = canvas.toDataURL('image/jpeg');
    var file = dataURLtoBlob( canvas.toDataURL('image/jpeg') );;
    
    const fd = new FormData;
    fd.append('image', file);
    xhr.send(fd);
});

PHP：

<?php
    if (isset($_FILES['image'])){
        print_r ($_FILES['image']);
    };
?>

Answer 1

您添加的图像名称与您尝试检索的名称不同。

form.addEventListener('submit', function(e) {

    e.preventDefault();
    
    var xhr = new XMLHttpRequest();
    var image_data_url = "";
    xhr.open('POST', 'image.php', true);
    xhr.onreadystatechange = function ()
    {
        if(xhr.readyState === XMLHttpRequest.DONE) {
            var status = xhr.status;
            if (status === 0 || (status >= 200 && status < 400)) {
                alert(xhr.reponseText);
            };
        };
    }

    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    image_data_url = canvas.toDataURL('image/jpeg');
    var file = dataURLtoBlob( canvas.toDataURL('image/jpeg') );;
    
    const fd = new FormData;
    fd.append('image', file);
    xhr.send(fd);
});

// ...
if (isset($_FILES['file'])){
// Up here it should be: if (isset($_FILES['image'])){
// ...