警告

Question

“表单”标题下的Google support article示例已损坏。从文章：

如果您使用表单元素作为参数调用服务器函数，则表单将成为单个对象，其中字段名作为键，而字段值作为值。这些值都将转换为字符串，但文件输入字段的内容除外，这些内容成为Blob对象。

我通过传递一个包含5个文本输入和一个文件的Form元素，然后在表单对象上记录Object.keys()来进行测试。它仅返回5个文本字段，文件已从表单对象中删除。尝试分配直接返回Exception: Invalid argument: blob

的文件blob

如何将文件形式从客户端窗体传递到服务器端Apps脚本？

编辑：为澄清起见，我还逐字粘贴了Google提供的示例。 Exception: Invalid argument: blob错误。

要复制：

创建新的Google Apps脚本项目
Index.html内容：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      // Prevent forms from submitting.
      function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
      window.addEventListener('load', preventFormSubmit);

      function handleFormSubmit(formObject) {
        google.script.run.withSuccessHandler(updateUrl).processForm(formObject);
      }
      function updateUrl(url) {
        var div = document.getElementById('output');
        div.innerHTML = '<a href="' + url + '">Got it!</a>';
      }
    </script>
  </head>
  <body>
    <form id="myForm" onsubmit="handleFormSubmit(this)">
      <input name="myFile" type="file" />
      <input type="submit" value="Submit" />
    </form>
    <div id="output"></div>
 </body>
</html>

Code.gs内容：

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function processForm(formObject) {
  var formBlob = formObject.myFile;
  var driveFile = DriveApp.createFile(formBlob);
  return driveFile.getUrl();
}

发布为Web App
提交包含任何文件的表格
在视图-> Stackdriver Logging-> Apps脚本仪表板中观察错误

Answer 1

这是一个例子：

html：

tearDown(){}

服务器代码：

<!DOCTYPE html>
<html>
  <head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  function fileUploadJs(frmData) {
    document.getElementById('status').style.display ='inline';
    google.script.run
      .withSuccessHandler(updateOutput)
      .uploadTheFile(frmData)
  }

  function updateOutput(info)  {
    var br='<br />';
    var outputDiv = document.getElementById('status');
    outputDiv.innerHTML = br + 'File Upload Successful.' + br + 'File Name: ' + info.name + br + 'Content Type: ' + info.type + br + 'Folder Name: ' + info.folder;
  }

  console.log('My Code');
</script>
<style>
  body {background-color:#ffffff;}
  input{padding:2px;margin:2px;}
</style>

  </head>
  <body>
    <h1 id="main-heading">Walking Tracks</h1>
    <h3>Upload GPS Tracks Files</h3>
    <div id="formDiv">
      <form id="myForm">
        <input name="fileToLoad" type="file" /><br/>
        <input type="button" value="Submit" onclick="fileUploadJs(this.parentNode)" />
      </form>
    </div>
  <div id="status" style="display: none">
  <!-- div will be filled with innerHTML after form submission. -->
  Uploading. Please wait...
  </div>  
  <div id="controls">
      <input type="button" value="Close" onClick="google.script.host.close();" />
  </div>
</body>
</html>

Answer 2

我可以确认这在G-Suite Enterprise中不起作用。我不知道为什么，因为我找不到说明Google如何序列化数据的文档。它可能是浏览器/计算机的安全性设置，也可能是G-Suite中的某种设置。

但是，有一种更简单的方法可以满足您的需求。您可以将Google表单用于文件上传问题，然后在其上创建一个on form submit触发器/事件以将该文件复制到团队/共享驱动器。如果要将触发器附加到Google表单本身，请参见以下示例代码：

// ID of the destnation folder to save the file in
var destinationFolderID = "10gkU_2V9iYy-VKudOCOjydEpoepPTgPv"

function saveFileToTeamDrive(e)
{
  // a place to save the URL of the uploaded file
  var fileID;

  // go through all of the responses to find the URL of the uploaded file
  e.response.getItemResponses().forEach(function(itemResponse){
    // once we find the question with the file
    if(itemResponse.getItem().getTitle() == "File Upload Test")
    {
      // get the file ID from the response
      fileID = itemResponse.getResponse();
      return;
    }
  });

  // stop if we didn't have one
  if(!fileID.length) return;

  // get the first index in the array
  fileID = fileID[0];

  // get the file
  var file = DriveApp.getFileById(fileID);

  // get the destination folder
  var destinationFolder = DriveApp.getFolderById(destinationFolderID);

  // make a copy
  var newFile = file.makeCopy(destinationFolder);

  Logger.log(newFile.getUrl());
}

您还可以附加到链接到Google表单的Google表格的on form submit事件。我发现这种方式更容易，因为Google表格on form submit触发器/事件包含问题/答案的JSON，因此您无需遍历所有问题即可找到它。这也意味着如果提交失败，您可以重新运行。

警告

一个重要的注意事项，如果您执行上述任何一项操作，则不会授予其他任何人对该代码的编辑权限。这是因为，一旦您创建并授权了触发器，任何拥有对代码的编辑访问权限的人都将能够使用它来访问您的Google云端硬盘（以及触发器所授权的其他任何内容）。有关更多信息，请参见securing a Google Apps Script linked to an authorized trigger so others can edit。

如何将文件上传Blob从HTML表单传递到服务器端Apps脚本？

2 个答案:

警告