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);
                   ^^^^^^^^^

您正在获取数据网址。这不是文件。

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

由于它不是文件，因此不会出现在$_FILES或文件名中。

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

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

1 个答案: