使用 XMLHttpRequest 发送图像并使用 php 抓取

Question

我使用网络摄像头捕获用户个人资料图片，然后我使用 XMLHttpRequest 将图像上传到服务器，如下所示：

document.getElementById('upload').addEventListener('click', function () {
    var image = canvas.toDataURL('image/jpeg', 1.0);
    var request = new XMLHttpRequest();
    var fd = new FormData();
    fd.append('picture', image);
    request.open('POST', 'upload.php');
    request.onload = function () {
        if (request.status == 200) {
            console.log('all done: ');
        } else {
            console.log('Nope');
        }
    };
    request.setRequestHeader('Content-Type', 'multipart/form-data');
    request.send(fd);
});

我没有使用表单，我在这一行从canva html元素获取图像：

var image = canvas.toDataURL('image/jpeg', 1.0);

我认为js部分一切正常，控制台显示数据已发送。 在 php 中，我尝试像这样操作图像并存储到服务器目录：

<?php
$info = pathinfo($_FILES['picture']['name']);
$ext = $info['extension']; // get the extension of the file
$newname = "perfil.".$ext; 

$target = 'uploads/'.$newname;
move_uploaded_file( $_FILES['picture']['tmp_name'], $target);
?>

但是图像实际上并没有存储在上面代码中指定的文件夹中，我不知道我做错了什么或者是否有什么东西逃脱了我。

Answer 1

var image = canvas.toDataURL('image/jpeg', 1.0);
                   ^^^^^^^^^

您正在获取一个数据 URL。这不是文件。

$info = pathinfo($_FILES['picture']['name']);

因为它不是文件，所以它不会在$_FILES 中或有文件名。

您可以从$_POST['picture'] 读取数据。 This question 然后介绍了将数据 URL 转换为文件的过程。