javascript - 使用 Google Apps 脚本从 Google Drive 中的多个上传元素上传本地文件

我有一个 Web 应用程序，其中用户应该能够上传和提交他们的文档。我在 Google 上搜索并找到了 Tanaike 的代码教程，但它适用于一个上传元素中的多个文件。这是链接:https://tanaikech.github.io/2018/12/22/uploading-multiple-files-from-local-to-google-drive-using-google-apps-script/
这是我的 html 正文代码:

 <body>

  <div class= "container-md"> 
    
    <div class="form-inline">
    <div class="form-group mb-2"><label for="appLetter">Application Letter:</label></div>
    <div class="form-group mx-sm-3 mb-2"> <input name="file" type="file" class="form-control-file" id="appLetter" accept="application/pdf"> </div>
    </div>

    <div class="form-inline">
    <div class="form-group mb-2"><label for="appPDS">Personal Data Sheet:</label></div>
    <div class="form-group mx-sm-3 mb-2"> <input name="file" type="file" class="form-control-file" id="appPDS" accept="application/pdf"> </div>
    </div>
    
    <div class="form-inline">
    <div class="form-group mb-2"><label for="appTOR">Transcript of Records:</label></div>
    <div class="form-group mx-sm-3 mb-2"> <input name="file" type="file" class="form-control-file" id="appTOR" accept="application/pdf"> </div>
    </div>

    <div class="form-row"> <button id = "uploadbtn" type="submit" class="btn btn-primary">Submit</button> </div>
  </div>  <!-- CLOSE CONTAINER -->

</body>

这是javascript代码:

    <script>

     document.getElementById("uploadbtn").addEventListener("click",getFiles);


   function getFiles(){
   const appLtr = document.getElementById("appLetter");
   const appPDS = document.getElementById("appPDS");
   const appTOR = document.getElementById("appTOR");
   
   const fileList = [
      ...appLtr.files, 
      ...appPDS.files, 
      ...appTOR.files
   ];
   
   console.log(fileList);
   const r = Promise.all(fileList.map(((file, i) => {
   const fr = new FileReader();
   return new Promise((r) => {
   fr.onload = (e) => {
   const data = e.target.result.split(",");
   return r({fileName: fileList.files[i].name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]});
   }
   fr.readAsDataURL(file);
   });
   })))
   .then((appObject) => {

   google.script.run.withSuccessHandler((id) => {
   console.log(id);
   }).creatZip(appObject);
   });
   }
   </script>

我修改了教程中的代码。我试图创建一个包含文档详细信息的数组。但我不知道如何修改它以单独处理文件。我的目标是将文件从网络应用程序上传到谷歌驱动器并将文件压缩到一个文件夹中。意思是，我将有一个包含来自多个上传元素的文件的 zip 文件。 Tanaike 的教程非常有用，但它适用于具有单个/多个文件的单个上传元素，但我的问题是如何将文件从多个上传元素上传到 zip 文件。
顺便说一下，这是他用于压缩文件的谷歌应用程序脚本代码:

function creatZip(appObject){
var appName = "Applicant1"
var fileBlobs = appObject.map(function(e){
  return Utilities.newBlob(Utilities.base64Decode(e.data), e.mimeType, e.fileName)
});
var zip = Utilities.zip(fileBlobs, appName + " Files");
return DriveApp.createFile(zip).getId();

}

非常感谢您的帮助和投入。

最佳答案

我相信你的目标如下。

您想上传多个文件并使用 Google Apps 脚本将这些文件压缩为一个 zip 文件。

在您的脚本中，以下修改如何？我认为fileList.files[i].name需要修改为file.name . Ref
从:

return r({fileName: fileList.files[i].name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]});

到:

return r({fileName: file.name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]});

笔记:

在 Utilities.zip , 当使用相同文件名的文件时，会发生错误。请注意这一点。

并且，在当前阶段，用于创建 Google Apps Script 文件的 Blob 的最大大小为 50 MB。请注意这一点。

引用:

javascript - 使用 Google Apps 脚本从 Google Drive 中的多个上传元素上传本地文件

上一篇：typescript - TS 映射类型 : Conditionally remove certain key base on value

下一篇：javascript - 如何向图像的某些部分添加多个链接