个人中心
gpt4 book ai didi

javascript - Google Apps 脚本文件上传(通过 HTML 形式)仅在脚本为 "bound"时有效(测试独立脚本时，HTTP 403 错误)

转载 作者：行者123 更新时间：2023-11-30 15:24:44 28 4
gpt4 key购买 nike

要将本地文件上传到 Google 云端硬盘，我有一个 HTML <form></form> (请参阅下面的代码)以模式覆盖用户已打开的 Google 表格。 HTML 表单有 <input type="file" name="...">在其中，当我点击发送表单对象时，我成功上传了文件如果这个 Google Apps 脚本被“绑定(bind)”到一个特定的表格文件(并且被写入使用 Tools > Script Editor... 菜单)。

如果我将该脚本另存为独立脚本，然后在我选择的表格文件上对其进行测试(已安装并启用)，则 <form>的 onclick Action 和调用 google.script.run.aServerFunction(...) 的尝试导致 "NetworkError: Connection failure due to HTTP 403" .为了澄清这就是我创建独立脚本并在表格文件上测试它的意思:https://developers.google.com/apps-script/add-ons/#understand_the_development_cycle .在早期的代码迭代中，我或者得到了某种授权 scriptError。当脚本以私密方式发布供测试人员在工作表上使用时出现同样的错误。不幸的是，我认为我需要它作为一个独立的脚本，以后可以作为一个附加组件发布——而不是使用 Tools > Script Editor... 绑定(bind)到单个工作表的辅助脚本。菜单。

我在 Stack Overflow 上的第一篇文章 - 请原谅任何行话或排版错误，谢谢!

改编自教程的 HTML:

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script>
        function failed(event) {
          $("div.response").text(event);
          //google.script.run.selectStuff();
          //google.script.host.close();
        }
      </script>
  </head>
  <body>
    <form id="myForm">

    <label>Your Name</label>
    <input type="text" name="myName">

    <label>Pick a file</label>
    <input type="file" name="myFile">

    <input type="submit" value="Upload File" 
               onclick="google.script.run.withFailureHandler(failed)
                        .uploadFiles(this.parentNode);
                        return false;">
</form>
<div class="response"></div>
  </body>

</html>

在code.gs中:

function uploadFiles(formObject) {
  /*var sheet1 = SpreadsheetApp.getActiveSheet();
  sheet1.setActiveRange(sheet1.getRange(2, 2, 4, 4));

  var formBlob = formObject.myFile;
  var driveFile = DriveApp.createFile(formBlob);
  driveFile.addEditor("...");
  SpreadsheetApp.getActive().toast(driveFile.getUrl());
  sheet1.getRange(1,1,1,1).setValue(driveFile.getUrl());
  return driveFile.getUrl();*/

  return "it worked";
}

最佳答案

我相信您收到 HTTP 403 错误的原因是表单 DOM 元素是工作表插件中 google.script.run.myfunction(...) 中的非法参数。尽管它们在这里作为合法参数被提及 here ，我认为附加组件具有无法传递任何类型的 DOM 元素的附加限制。

我想到的解决方案是使用 Filereader.readAsDataUrl() 将上传的文件转换为 base64 编码字符串在 native javascript 中运行并将字符串传递给谷歌脚本并将其转换回要上传到谷歌驱动器的文件。base64 编码字符串是这样开始的:

data:application/pdf;base64,JVBERi0xLjMKJcTl8uXrp/Og0MTG....

天然气

function uploadFiles(formObject) {
  // extract contentType from the encoded string 
  var contentType = formObject.split(",")[0].split(";")[0].split(":")[1]
  // New Blob(data,contentType,name)
  // Use base64decode to get file data
  var blob = Utilities.newBlob(Utilities.base64Decode(formObject.split(",")[1]), contentType, "trial")
  var driveFile = DriveApp.getFolderById("your Folder ID here").createFile(blob);
  //return contentType, can be anything you like
  return blob.getContentType()
}

HTML 脚本

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>

  </head>
  <body>
    <form id="myForm">

    <label>Your Name</label>
    <input type="text" name="myName">

    <label>Pick a file</label>
    <input type="file" id = "filemy" name="myFile">

    <input type="button" value="Upload File" 
               onclick="upload(this.parentNode)">
</form>
<div class="response"></div>
  </body>
  <script>
        function failed(event) {
          $("div.response").text(event);
          //google.script.run.selectStuff();
          //google.script.host.close();
        }

        function upload(frmData){
        var file = document.getElementById("filemy").files[0]
        var reader = new FileReader()
        //reader.onload is triggered when readAsDataURL is has finished encoding
        //This will take a bit of time, so be patient
        reader.onload = function(event) {
        // The file's text will be printed here
        console.log("File being Uploaded")
        //console.log(event.target.result)
        google.script.run.withFailureHandler(failed).withSuccessHandler(failed)
                        .uploadFiles(event.target.result);
        };

        reader.readAsDataURL(file);
        console.log(reader.result)
        }
      </script>

</html>

最后的说明:我没有对代码进行广泛的测试，我已经让它可以处理一个 pdf 文件和一个最大大小为 2.6MB 的图像/png 文件。因此，请先尝试这两种文件类型，然后再继续使用其他类型的文件!此外，文件确实需要一段时间才能上传，因此请耐心等待(~5-10 秒)。尤其是没有进度条显示上传进度，感觉就像什么都没有发生一样。

希望对您有所帮助!

关于javascript - Google Apps 脚本文件上传(通过 HTML 形式)仅在脚本为 "bound"时有效(测试独立脚本时，HTTP 403 错误)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43170545/

28 4 0
文章推荐： javascript - 使用 JavaScript 的小时和分钟
文章推荐： c# - 从不记名 token 生成身份
文章推荐： c# - 桌面应用程序中的 Application Insights 不会发送性能计数器
文章推荐： C 文本转换程序
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com