javascript - 使用 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 转换为文件的过程。