无法向谷歌脚本网络项目提交多个文件答案

【问题标题】：Unable to submit more than one file to google script web project无法向谷歌脚本网络项目提交多个文件
【发布时间】：2022-01-02 18:38:21
【问题描述】：

我创建了一个 Google Script Web 项目并添加了一个 HTML 表单，该表单具有多个文件输入字段和一些文本输入字段。该表单正在工作并每次提交所有文本输入，但文件输入字段存在问题。

当我的表单只有一个文件输入字段时，所有文本输入和文件数据都会提交到服务器并可以保存文件。
当我的表单有两个或多个文件输入字段时，所有文本输入都会提交到服务器端，但文件字段有空对象，即@ 987654324@

表格如下：

<form id="msForm">
    .......
    <input type="file" class="custom-file-input" name="certificateFile" accept="application/pdf" required >
    <input type="file" class="custom-file-input" name="otherDocuments" accept="application/pdf" required >
    .....
    <input type="button" name="next" class="next action-button" value="Submit" />
</form>

JS有以下提交表单：

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

$(document).ready(function(){
  $(".next").click(function(){
    if($(this).val()=="Submit") {
     google.script.run
      .withSuccessHandler(successFormSubmit)
      .withFailureHandler(failedFormSubmit)
      .processForm($(this).closest("form")[0]);
    }
  });
});

Code.gs文件中的服务器端函数：

function processForm(formObject) {
  console.log(formObject.certificateFile);
  console.log(formObject.otherDocuments);
}

应用程序正在使用以下项目设置进行部署和测试：

【问题讨论】：

服务器端函数processForm()在哪里？
@Cooper 更新了帖子
到目前为止，我只能看到您的 $(document).ready(function() 缺少右括号。你能展示你的 doGet() 函数、WebApp 部署设置和导入的客户端库（jQuery 等...）吗？
感谢@ziganotschka 我在issuetracker.google.com/issues/212826471添加了一个新错误

标签： google-apps-script

【解决方案1】：

这个问题似乎是一个错误。当 Google 正在研究它时，我建议您采取一种解决方法：

仅记录 bytearray 服务器端似乎会受到该错误的影响，您仍然可以从通过DriveApp.createFile() 提交的表单中传递的 blob 创建所有文件。
如果您需要服务器端检查以确保文件 blob 不为空，您可以在表单中创建一个非“文件”类型的隐藏附加元素，并使用它作为占位符将信息发送到服务器端。

示例：

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>     
   <form id="msForm">
    <input type="file" class="custom-file-input" name="certificateFile" accept="application/pdf" required >
    <input type="file" class="custom-file-input" name="otherDocuments" id="otherDocuments" accept="application/pdf" required >

    <input type="text" readonly="true" name="otherDocumentsName" id="otherDocumentsName" style="display: none;">
    
    <input type="button" id="submitBtn" name="next" class="next action-button" value="Submit" />
   </form>
    <script>
      
      document.getElementById('submitBtn').addEventListener('click',function(e) {
          console.log(this.parentNode)
          document.getElementById("otherDocumentsName").value = document.getElementById("otherDocuments").value;
          google.script.run.withSuccessHandler(successFormSubmit).withFailureHandler(failedFormSubmit).processForm(this.parentNode);
        })
        
        function successFormSubmit(data){
          console.log("success");
        }
        
       function failedFormSubmit(data){
          console.log("failed");
        }
       
    </script>
  </body>
</html>

code.gs

function doGet() {
  var html = HtmlService.createHtmlOutputFromFile('index');
  return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function processForm(data){  
  var blob1 = data.certificateFile;
  var file1 = DriveApp.createFile(blob1);
  file1.setName("certificateFile");
  if (data.otherDocumentsName !== "") {
    console.log("not empty")
    var file2 = DriveApp.createFile(data.otherDocuments);
    file2.setName("otherDocuments");  
  }
  else{
    console.log("empty");
  }  
}

【讨论】：

感谢@ziganotschka 的回答。您的代码对我来说没有任何意义，因为它与我的功能相同。
如果您仔细观察，您会看到我的代码将this.parentNode 传递给了Apps 脚本而不是$(this).closest("form")[0]，如果您对其进行测试，您应该注意到它成功地处理了这两个文件。你试过运行它吗？
传递的对象是同一个表单元素。也可以使用那些 document.getElementById 来代替，这对 google.script.run 方法没有任何影响。
我为您提供了一个经过测试的有效解决方案，允许提交多个文件。如果这不是您想要的，请忽略它。
我检查了您的代码，但没有任何内容保存到驱动器中。该应用程序已重新部署以授予驱动器权限，并通过将我的代码完全替换为您的代码来检查您的代码。对于单个文件，你的和我的都可以。