javascript - Google Drive API v3，如何从 HTML2Canvas、Javascript、ajax、php 简单上传图像

Question

我只是想从 HTML2Canvas 将一个文件（小于 5MB）上传到我自己的个人 Google Drive。我是新手，正在努力学习。该文档非常混乱，没有简单上传的示例。

我已经设置了 Google Drive API 并使用https://developers.google.com/drive/api/v3/quickstart/js上的快速入门指南对其进行了测试。这完美地工作，但它对我想要做的事情没有帮助。

以下是我正在尝试做的基本步骤：

1. （完成）使用 HTML2Canvas 生成图像。
2. （完成）将具有唯一名称的图像保存到我的网站目录中的新文件夹中。
3. （未完成）将图像保存到我个人谷歌驱动器的新文件夹中。

这是我的 CURRENT 代码，它通过 #2 工作（您可以在https://www.cardobot.com上试用我目前拥有的代码）。我不知道如何正确发布到我的谷歌驱动器。在这一点上，我真的需要一步一步的帮助。

JAVASCRIPT（这完全符合预期）

    let ln_un = n_inp2.value() + n_inp1.value();

    //SEND CARD TO SERVER
    function saveCardtoServer() {
          html2canvas(document.getElementById("cardCritter"), {scale:4, backgroundColor:"#eafefc"}).then(function(canvas) {
          var dataURL = canvas.toDataURL("image/png");
              var user_Name = ln_un;
            $.ajax({
                    type: "POST", 
                    url: "savePNG.php", 
                    data: { img: dataURL, unm: user_Name }      
                  }).done(function(msg){ 
                    alert(msg); 
                    });
          });
    }

下面是 savePNG.php （这完全符合预期）

<?php
 
    $img = $_POST['img'];
    $unm = $_POST['unm'];
   
   if (strpos($img, 'data:image/png;base64') === 0) {
       
      $img = str_replace('data:image/png;base64,', '', $img);
      $img = str_replace(' ', '+', $img);
      $data = base64_decode($img);
      $path = "images/userCards/{$unm}/";
            if ( ! is_dir($path)) {
            mkdir($path);
            }   ;
      $file = ("images/userCards/{$unm}/".date(Ymdhis).$unm.'.png');
   
      if (file_put_contents($file, $data)) {
         echo "CARD SAVED!";
      } else {
         echo 'CARD NOT SAVED!';
      }   
     
   }
 
?>

现在，如何使用 Google Drive API 将图像发布到我的个人 Google Drive？我尝试以与发布另一张图片相同的方式发布，并且尝试按照我可以在 StackOverflow 和其他网站上找到的所有指南和帖子进行发布，但没有任何效果。

我是新手，所以我真的需要一些逐步的帮助。

非常感谢您的帮助！

标签： javascriptjqueryajaxgoogle-drive-apihtml2canvas