javascript - 如何使用 longblob 列将输入图像保存在数据库中？

Question

我有一个文件类型输入。我希望将输入中插入的照片发送到数据库并保存。我写了一些代码，根据逻辑应该可以工作。但我不知道为什么它不起作用。我哪里错了？列照片是longblob类型

html

     <label for="">img</label>
     <input type="file"  id="immagine" >

JavaScript

     function values(a){
      if (a.length>1){
       var img;
       const fr = new FileReader();
       fr.onload = () => {
        // It worked
         img = fr.result;

           var params= "V1="+a[2]+"& V2="+a[3]+"& V3="+a[4]+"& V4="+a[5]+"& V5="+a[6]+"& V6="+a[7]+"& V7="+a[8]+"& V8="+a[9]+"& V9="+a[10]+"& V10="+a[11]+"& V11="+a[12]+"& V12="+a[13]+"& V13="+a[14]+"& V14="+a[15]+"& img="+img;

           var xhttp = new XMLHttpRequest();
           xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

            }
           };
           xhttp.open("POST", "./server/AggiuntaBhk.php", true);
           xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhttp.send( params);

        // ...use the array here...

           };
           fr.onerror = () => {
              // The read failed, handle/report it
                document.getElementById("a").innerHTML= "noo";
                                    };
          fr.readAsBinaryString(document.getElementById('immagine').files[0]);
}
}

php

     include("../../connessione_db/db_con.php"); // Include il file di connessione al database
     session_start();

     $v1=$_REQUEST["V1"];
     $v2=$_REQUEST["V2"];
     $v3=$_REQUEST["V3"]; 
     $v4=$_REQUEST["V4"];
     $v5=$_REQUEST["V5"];
     $v6=$_REQUEST["V6"];
     $v7=$_REQUEST["V7"];
     $v8=$_REQUEST["V8"];
     $v9=$_REQUEST["V9"];
     $v10=$_REQUEST["V10"];
     $v11=$_REQUEST["V11"];
     $v12=$_REQUEST["V12"];
     $v13=$_REQUEST["V13"];
     $v14=$_REQUEST["V14"];
     $foto=$_REQUEST["img"];
     $queryInput="INSERT INTO bhk (Metrica1,Metrica2,Metrica3,Metrica4,Metrica5,Metrica6,Metrica7,Metrica8,Metrica9,Metrica10,Metrica11,Metrica12,Metrica13,Data,Puntoz,Paziente,Foto) VALUES ('$v1','$v2','$v3','$v4','$v5','$v6','$v7','$v8','$v9','$v10','$v11','$v12','$v13','2014-01-01','$v14','BVNVCN97L18C983O','$foto')";

     $queryI = mysqli_query($connessione_al_server,$queryInput);

查询后显示

              <?php
                echo '<img id="imgcaricata" class="mySlides" 
                 src="data:image/jpeg;base64,'.base64_encode( $foto["Foto"] 
                   ).'"
                 style="height:auto; width:auto;max-width:500px; margin-top:55px;" />';
                 ?>

我还尝试在数据库中使用 until8Array 和 FileReader.readAsArrayBuffer() 我有正确的文件，但不显示任何内容。如果我使用浏览选项将图像直接插入数据库，我只能看到图像。我存储或显示错误吗？

Answer 1

第一个read file by JavaScript :

var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("immagine").files[0]);
oFReader.onload = function (oFREvent) {
    imgdata = oFREvent.target.result;
};

在params中添加imgdata:

var params = "img=" + encodeURIComponent(imgdata);

发送到服务器:

xhttp.send(params);

查询后显示:

<?php
echo '<img id="imgcaricata" class="mySlides" src="'.$foto["Foto"].'" style="height:auto; width:auto;max-width:500px; margin-top:55px;"/>';
?>