通过网络应用上传图片后，将Google云端硬盘中的图片链接插入Google表格中 [英] Insert Image Link from Google Drive into Google Sheets After Uploading an Image via Web App

查看：73 发布时间：2020/11/17 1:16:37 javascript google-apps-script web-applications google-apps

本文介绍了通过网络应用上传图片后，将Google云端硬盘中的图片链接插入Google表格中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

作为序言，我一般对编程都是超级陌生的，没关系的javascript.

To preface, I'm super new to programming in general, nevermind javascript.

我正在开发一个Web应用程序，用户可以在其中单击按钮来上传图片.此操作会将具有唯一文件夹和名称的图片上传到我的Google驱动器中的某个目录中.

I'm developing a web application where a user can upload a picture by clicking on a button. This action will upload pictures into a certain directory in my google drive with a unique folder and name.

现在，我正尝试在上传图片时复制并粘贴该图片的google驱动器链接.

Now, I'm trying to copy and paste the google drive link of a picture any time it has been uploaded.

我能够在getFileUrl()方法中成功获取图片URL的ID.但是，当我在doStuff1()函数中调用该方法，然后将该信息插入到userInfo.fileUrl中时，我得到了

I am able to successfully get the ID of the picture URL in my getFileUrl() method. But when I call that method within my doStuff1() function then later insert that info into userInfo.fileUrl, I am getting https://docs.google.com/document/d/undefined/ as the output in my spreadsheet. How can call that value?

更新:我意识到当我使用"google.script.run.getFileUrl(" fn，" i)时，就是当我得到" undefined时，我在本地运行getFileUrl()函数时，我确实得到了想要的值.请告知我如何正确使用.WithSuccessHandler(function)，以便可以返回"fileId0"的值.

Updated: I am realizing that when I use "google.script.run.getFileUrl("fn","i"), that is when I'm getting "undefined". When I run the getFileUrl() function locally, I do get the value that I want. Please advise how I can use .WithSuccessHandler(function) correctly so that I can return the value of "fileId0".

这是用户上传图片的前端

This is the front end, where a user uploads the picture

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表格中添加一行

This is part of the javascript to put relevant info in an array, which will later be used to append a row in the 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的一部分

This is part of the javascript to upload picture file into the Google drive

(仍是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工作表中的一行中.任何时候，我都单击前端的按钮，它将创建一个新行.

This part grabs the array "userInfo" and appends the content in a row within a designated google sheet. Any time, I click on the button in the front end, it creates a new row.

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

注意:

在此修改中，我使用doStuff2()从getFileUrl()检索值.如果要修改函数名称，请对其进行修改.

Note:

In this modification, I used doStuff2() for retrieving the values from getFileUrl(). If you want to modify the function name, please modify it.

google.script.run类

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

If I misunderstood your question and this was not the result you want, I apologize.

这篇关于通过网络应用上传图片后，将Google云端硬盘中的图片链接插入Google表格中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

注意:

Note:

通过网络应用上传图片后，将Google云端硬盘中的图片链接插入Google表格中 [英] Insert Image Link from Google Drive into Google Sheets After Uploading an Image via Web App

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

通过网络应用上传图片后，将Google云端硬盘中的图片链接插入Google表格中 [英] Insert Image Link from Google Drive into Google Sheets After Uploading an Image via Web App

问题描述

推荐答案

注意:

Note:

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭