通过 Web 应用程序上传图像后，将来自 Google 驱动器的图像 Link 插入 Google 工作表

Question

作为序言，总的来说，我是编程新手，没关系 javascript。

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

现在，我正在尝试复制并粘贴已上传图片的 google 驱动器 link。

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

更新：我意识到当我使用 "google.script.run.getFileUrl("fn","i") 时，我会得到 "undefined"。当我运行 getFileUrl() 在本地运行，我确实得到了我想要的值。请告诉我如何正确使用 .WithSuccessHandler(function) 以便我可以 return "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

中追加一行

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

    }

这是 javascript 将图片文件上传到 Google 驱动器

的一部分

（仍然是页面的一部分-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 sheet 内追加一行中的内容。任何时候，我点击前端的按钮，它都会创建一个新行。

Code.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();
       }    
     }

Answer 1

在 "page-js.html" 的 doStuff1() 中，您想给出从 "Code.gs" 的 getFileUrl() 到 userInfo.fileUrl 的值 return。

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

修改点：

google.script.run.getFileUrl() 没有 return 值。当您想使用 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

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

通过 Web 应用程序上传图像后，将来自 Google 驱动器的图像 Link 插入 Google 工作表

Insert Image Link from Google Drive into Google Sheets After Uploading an Image via Web App

javascript

web-applications

google-apps

google-apps-script

修改点：

修改后的脚本：

注：

参考：