通过 Web 应用上传图片后，将 Google Drive 中的图片链接插入 Google 表格答案

【问题标题】：Insert Image Link from Google Drive into Google Sheets After Uploading an Image via Web App通过 Web 应用上传图片后，将 Google Drive 中的图片链接插入 Google 表格
【发布时间】：2019-06-18 16:51:51
【问题描述】：

首先，我对一般的编程非常陌生，没关系 javascript。

我正在开发一个网络应用程序，用户可以通过单击按钮上传图片。此操作会将图片上传到我的谷歌驱动器中的某个目录，并具有唯一的文件夹和名称。

现在，我正在尝试在上传图片的任何时候复制并粘贴图片的 Google Drive 链接。

我能够在我的 getFileUrl() 方法中成功获取图片 URL 的 ID。但是当我在我的 doStuff1() 函数中调用该方法，然后将该信息插入到 userInfo.fileUrl 中时，我得到https://docs.google.com/document/d/undefined/ 作为电子表格中的输出。怎么能调用那个值呢？

更新：我意识到当我使用“google.script.run.getFileUrl("fn","i") 时，我会得到“未定义”。当我在本地运行 getFileUrl() 函数时，我确实得到了我想要的值。请告诉我如何正确使用 .WithSuccessHandler(function) 以便我可以返回“fileId0”的值。

这是前端，用户上传图片的地方

page.html

  <html>
  <head> 
   <body>
   <form action="#" method="post" enctype="multipart/form-data">
   <div class="row">
     <div class="file-field input-field">
        <div class="waves-effect waves-light btn-small">
          <i class="material-icons right">insert_photo</i>
          <span>Import Picture</span>
          <input id="files" type="file" name="image">
        </div>

        <div class="file-path-wrapper">
            <input disabled selected type="text" class="file-path 
             validate" placeholder="Choose an image">
        </div>
     </div>
  </div>
  </form>

 <?!= include("page-js"); ?>

</div> <!-- CLOSE CONTAINER-->


 </body>
</html>

这是 javascript 的一部分，用于将相关信息放入数组中，稍后将用于在 google sheet 中追加一行

page-js.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>    
 <script src="https://gumroad.com/js/gumroad.js"></script>


 <script>
document.getElementById("addAnother").addEventListener("click",doStuff1);



    var i=1;
    var num={};


    function doStuff1(){

       num.picNum2=i;
       var personName=document.getElementById("fn").value;

       var fileId00=google.script.run.getFileUrl("fn","i");

       var userInfo ={};

       userInfo.firstName= document.getElementById("fn").value;
       userInfo.number=i;
       userInfo.fileUrl="https://docs.google.com/document/d/"+fileId00 
       +"/";


       i++;

       google.script.run.userClicked(userInfo);

    }

这是将图片文件上传到 Google 驱动器的 javascript 的一部分

（仍然是 page-js.html 的一部分）

  var file, 
  reader = new FileReader();
  var today = new Date();
  var date = today.getFullYear()+'-'+(today.getMonth()+1)+'- '+today.getDate();

  reader.onloadend = function(e) {
    if (e.target.error != null) {
      showError("File " + file.name + " could not be read.");
      return;
    } else {
      google.script.run
        .withSuccessHandler(showSuccess)
   .uploadFileToGoogleDrive(e.target.result,num.picNum,date,$('input#fn')
   .val(),$('input#date').val());

    }
  };

   function showSuccess(e) {
    if (e === "OK") { 
      $('#forminner').hide();
      $('#success').show();
    } else {
      showError(e);
    }
  }


     function submitForm() {


    var files = $('#files')[0].files;

    if (files.length === 0) {
      showError("Please select a image to upload");
      return;
    }

    file = files[0];

    if (file.size > 1024 * 1024 * 5) {
      showError("The file size should be < 5 MB.");
      return;
    }

    showMessage("Uploading file..");

    reader.readAsDataURL(file);


  }

        function showError(e) {
    $('#progress').addClass('red-text').html(e);
  }

  function showMessage(e) {
    $('#progress').removeClass('red-text').html(e);
  }

 </script>

这部分抓取数组“userInfo”并将内容附加到指定的 google 表格中的一行中。任何时候，我点击前端的按钮，它都会创建一个新行。

代码.gs

  //google sheet web script

    var url="https://docs.google.com/spreadsheets/d/XXXXX";

   function getFileUrl(fn,i){

  try{
      var today0 = new Date();
       var date0 = today0.getFullYear()+'-'+(today0.getMonth()+1)+'-' 
       +today0.getDate();

      var dropbox0 = "OE Audit Pictures";
      var folder0,folders0 = DriveApp.getFoldersByName(dropbox0);

     while (folders0.hasNext())
       var folder0=folders0.next();

      var dropbox20=[date0,fn].join(" ");


      var folder20,folders20=folder0.getFoldersByName(dropbox20);
      while (folders20.hasNext())
         var folder20=folders20.next();


         var file0, files0= folder20.getFilesByName(i);
      while (files0.hasNext())
        var file0=files0.next();


        var fileId0=file0.getUrl();


       return fileId0;
          }  catch(f){
  return f.toString();
        }
    }


  function userClicked(userInfo){

     var ss= SpreadsheetApp.openByUrl(url);
     var ws=ss.getSheetByName("Data");
      ws.appendRow([userInfo.number,new Date(), 
         userInfo.firstName,userInfo.fileUrl]);

      }

   function include(filename){
      return HtmlService.createHtmlOutputFromFile(filename).getContent();  
    }


  function uploadFileToGoogleDrive(data, file, fn, date) {

    try {

    var dropbox = "OE Audit Pictures";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
      } else {
      folder = DriveApp.createFolder(dropbox);
    }


   var contentType = data.substring(5,data.indexOf(';')),
     bytes = 
       Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)),

       blob=Utilities.newBlob(bytes, contentType, file)

       var dropbox2=[fn,date].join(" ");
       var folder2, folders2=folder.getFoldersByName(dropbox2)

       if (folders2.hasNext()){
           folder2=folders2.next().createFile(blob);
       } else {
          file = folder.createFolder([fn,date].join(" ")).createFile(blob);
        }
       return "OK";

       } catch (f) {
      return f.toString();
       }    
     }

【问题讨论】：

欢迎来到 StackOverFlow，请借此机会参加 tour 并学习如何使用 How to Ask 和 minimal reproducible example。

标签： javascript google-apps-script web-applications google-apps

【解决方案1】：

在“page-js.html”的doStuff1() 中，您希望将从“Code.gs”的getFileUrl() 返回的值提供给userInfo.fileUrl。

如果我的理解是正确的，那么这个修改呢？

修改点：

google.script.run.getFileUrl() 不返回值。当您想使用来自getFileUrl() 的值时，您可以使用withSuccessHandler()，如下修改脚本。

修改脚本：

请修改doStuff1()如下。

function doStuff1() {
   num.picNum2 = i;
   var personName = document.getElementById("fn").value;
   google.script.run.withSuccessHandler(doStuff2).getFileUrl("fn","i"); // Modified
}

// Added
function doStuff2(fileId00) {
  var userInfo = {};
  userInfo.firstName = document.getElementById("fn").value;
  userInfo.number = i;
  userInfo.fileUrl = "https://docs.google.com/document/d/"+fileId00 +"/";
  i++;
  google.script.run.userClicked(userInfo);
}

注意：

在此修改中，我使用doStuff2() 从getFileUrl() 检索值。如需修改函数名，请修改。

参考：

Class google.script.run

如果我误解了您的问题并且这不是您想要的结果，我深表歉意。

【讨论】：

谢谢！这将返回一个链接！几个问题仍然存在：在添加带有用户条目的新行的过程中（请参阅“Code.gs”-> ws.appendRow(...)），在与其余值不同的行上添加了一个链接数组“用户信息”。此外，当我传递用户输入“fn”和“i”时，我得到这个输出而不是链接：“TypeError：无法调用未定义的方法“getFilesByName”。”。这个问题消失了，当我在 getFileUrl(fn,i) 函数中将 fn 和 i 设置为固定值时，我得到了正确的输出（还手动创建了一个名为“fn”的文件夹和一个名为“i”的文件）。你能帮忙吗？
@Harry Lee 感谢您的回复。我很高兴你的问题得到了解决。我愿意支持你。但是您的评论问题是新问题，这与您的问题不同。那么您可以通过包含详细信息将其作为新问题发布吗？因为当您的初始问题被评论更改时，看到您的问题的其他用户会感到困惑。通过将其发布为新问题，包括我在内的用户可以想到您的新问题。当时，please close this question。如果您能合作解决您的新问题，我很高兴。
第一个问题 - 添加在单独行上的链接 - 是一个自己造成的问题。请忽略
请在此处的链接中找到新问题：stackoverflow.com/questions/56670567/…
@Harry Lee 感谢您的回复。我对你的新问题提出了一个问题。你能确认一下吗？