带有 AJAX 的未定义索引 [重复]答案

【问题标题】：Undefinde Index with AJAX [duplicate]带有 AJAX 的未定义索引 [重复]
【发布时间】：2019-01-20 14:49:00
【问题描述】：

我正在尝试使用 Ajax 发送二进制数据以使用 PHP 上传到数据库中。我无法访问$_POST：

响应文本：

注意：未定义索引：C:\xampp\htdocs\WEBCAM\upload.php 中的 obBlob 在第 4 行

AJAX '错误'：

{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …} abort : ƒ (e) always : ƒ () 捕获：ƒ (e) 完成：ƒ () 失败：ƒ () getAllResponseHeaders：ƒ () 参数：（...）调用者：（...）长度：0 名称： “getAllResponseHeaders”原型：{构造函数：ƒ} 原型：ƒ () [[FunctionLocation]]：jquery-3.3.1.min.js:2 [[Scopes]]：范围[3] getResponseHeader : ƒ (e) overrideMimeType : ƒ (e) 管道 : ƒ () 进度：ƒ（）承诺：ƒ（e）readyState：4 responseText：“Nenhuma imgagem entrada" setRequestHeader : ƒ (e,t) 状态 : ƒ () 状态: 200 statusCode：ƒ（e）statusText：“OK”然后：ƒ（t，r，i）proto：对象

代码：

index.html（完整）：

<!doctype html>
<html lang="pt">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
        <title>Webcam TRIX</title>      
    </head>
    <body>
        <video src="" id="video" muted autoplay></video>
        <canvas id="pic"></canvas>
        <!--  colocar um form com um action para salvar a foto -->
        <input type="text" id="blobOut" value="">
        <img alt="" src="" id="picOut"/>Foto
        <input type="button" id="btnStart" value="Tirar Foto">
        <input type="button" id="btnSave" value="Salvar Foto">
        <script type="text/javascript">
            //inicializa um objeto stream
            var tmpStream;
            function setMedia(video, s){
                tmpStream=s;
                try{
                    video.srcObject = s;
                }catch(error){
                    video.src = URL.createObjectURL(s);
                }
            }
            //função para iniciar a camera
            function startCamera(){
                navigator.mediaDevices.getUserMedia({
                    video:{facingMode:"environment"},
                    audio: true
                })
                .then((stream) => {
                    setMedia(document.getElementById("video"),stream);
                });
            }
            //função para parar a camera
            function stopCamera(){
                if(!tmpStream) return;
                tmpStream.getVideoTracks().forEach(track => track.stop());
            }
            //ligar a camer automaticamente
            window.addEventListener("DOMContentLoaded", startAll);
            //incicializa tudo
            function startAll()
            {
                startCamera();
                //função para tirar foto
                document.querySelector("#btnStart").addEventListener("click", event => {
                    canvas = document.getElementById("pic");
                    const context = canvas.getContext("2d");
                    const video = document.getElementById("video");
                    //tamanho da foto mesmo tamanho do video
                    canvas.width = video.offsetWidth;
                    canvas.height = video.offsetHeight;
                    //desenha o video no canvas
                    context.drawImage(video, 0, 0, canvas.width, canvas.height);
                });
            }
            document.getElementById("btnSave").addEventListener("click", event => {
                            canvas.toBlob(function(blob){
                                $.ajax({
                                    url : "upload.php",
                                    type: "POST",
                                    data: {obBlob: blob},
                                    contentType: false,
                                    processData: false,
                                    dataType:"json",
                                    success: function(resultado) {
                                      console.log(resultado);
                                    },
                                    error: function(resultado) {
                                        console.log(resultado);
                                    }
                                });
                            });
                        });
        </script> 
    </body>
</html>

上传.php（完整）：

<?php
header("Content-Type: application/json", true);
if(empty($_POST["obBlob"])) die("Nenhuma imgagem encontrada");
$obBlob = $_POST["obBlob"]; 
$servername = "localhost";
$username = "root";
$password = "";
$database = "fotos";
$conn = new mysqli($servername, $username, $password, $database);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "INSERT INTO fotos (foto) VALUES ($obBlob)";
if(mysqli_query($conn, $sql)){
    mysqli_close($conn);
}else{
    $error = $conn->error;
    mysqli_close($conn);
    die($error);
}
?>

编辑：

我曾尝试将 API FormData 与 AJAX 一起使用，但没有成功：

document.getElementById("btnSave").addEventListener("click", event => {
                            canvas.toBlob(function(blob){
                                var formData = new FormData();
                                formData.append("obBlob", blob);
                                $.ajax({
                                    url : "//localhost/webcam/upload.php",
                                    type: "POST",
                                    data: {obBlob: formData},
                                    contentType: false,
                                    processData: false,
                                    success: function(resultado) {
                                      console.log(resultado);
                                    },
                                    error: function(resultado) {
                                        console.log(resultado);
                                    }
                                });
                            });
                        });

我尝试过在没有 AJAX 的情况下使用 XMLHttpRequest... 是否转换为 JSON：

document.getElementById("btnSave").addEventListener("click", event => {
                    canvas.toBlob(function(blob){
                        json = JSON.parse(JSON.stringify(blob));
                        console.log(json);
                        var xhr = new XMLHttpRequest();
                        xhr.open("POST", 'upload.php', true);
                        xhr.setRequestHeader('Content-type','application/json; charset=utf-8');
                        xhr.send(json);
                    });
                });

编辑 2：

我放弃了使用blob类型并尝试使用canvas.toDataURL，但数组到达空：

document.getElementById("btnSave").addEventListener("click", event => {
                var dataURL = canvas.toDataURL();
                $.ajax({
                    url : "//localhost/webcam/upload.php",
                    type: "POST",
                    data: {"imgBase64":dataURL},
                    contentType: false,
                    processData: false,
                    dataType:"json",
                    success: function(resultado) {
                      console.log(resultado);
                    },
                    error: function(resultado) {
                        console.log(resultado);
                    }
                });
            });

当我在 Chrome 的开发工具的网络选项卡中验证有效负载时，对象就在那里！

我已经尝试了很多东西，但仍然无法正常工作...我已经验证了 $_SERVER['REQUEST_METHOD'] 并返回 POST，我不知道发生了什么...我处于反复试验的根源！

【问题讨论】：

您的 php 代码在 $_GET 中查找，但您是通过 POST 发送的。
其实我都试过了，用$_POST发送，用$_POST获取，用同样的方法用$_GET。
好吧，上面使用 $_GET 的代码会导致您报告的错误消息。如果您真的在使用 $_POST，请更新您的问题。

标签： javascript php jquery ajax xmlhttprequest

【解决方案1】：

试试这个

var formData = new FormData()

formData.append("obBlob", blob);

var request = new XMLHttpRequest();
request.open("POST", "//localhost/webcam/upload.php");
request.send(formData);

【讨论】：

非常感谢......它工作......我是JS的新手，我试图用XMLHttpRequest而不是FormData对象发送索引！