使用 Google Apps 脚本批量导入多个条目

2024-04-18

我知道有现有的代码可以构建可以上传多个文件（批量导入）的表单，如下所示使用 Google App 脚本将多个文件上传到 Google Drive https://stackoverflow.com/questions/31126181/uploading-multiple-files-to-google-drive-with-google-app-script，但我只是想知道是否可以多次要求批量导入（或大尺寸文件）？现有脚本似乎使用 document.getFileByID() 传递上传函数中一个输入的 id，但我无法在其中传递多个 id。

这是我提到的代码（复制自使用 Google App 脚本将多个文件上传到 Google Drive https://stackoverflow.com/questions/31126181/uploading-multiple-files-to-google-drive-with-google-app-script):

function doGet() {
  return HtmlService.createHtmlOutputFromFile('form')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function uploadFileToDrive(base64Data, fileName) {
  try{
    var splitBase = base64Data.split(','),
        type = splitBase[0].split(';')[0].replace('data:','');

    var byteCharacters = Utilities.base64Decode(splitBase[1]);
    var ss = Utilities.newBlob(byteCharacters, type);
    ss.setName(fileName);

    var dropbox = "Something"; // Folder Name
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    var file = folder.createFile(ss);

    return file.getName();
  }catch(e){
    return 'Error: ' + e.toString();
  }
}

<body>
  <div id="formcontainer">

    <label for="myForm">Facilities Project Database Attachment Uploader:</label>

    <br><br>


    <form id="myForm"> 
      <label for="myForm">Project Details:</label>
      <div>
        <input type="text" name="zone" placeholder="Zone:">
      </div>
      <div>
        <input type="text" name="building" placeholder="Building(s):">
      </div>
      <div>
        <input type="text" name="propertyAddress" placeholder="Property Address:">
      </div>
      <div>

      <label for="fileText">Project Description:</label>

          <TEXTAREA name="projectDescription" 
          placeholder="Describe your attachment(s) here:"
          style ="width:400px; height:200px;"
          ></TEXTAREA>


      </div> 
      <br>


      <label for="attachType">Choose Attachment Type:</label>
      <br>
      <select name="attachType">
        <option value="Pictures Only">Picture(s)</option>
        <option value="Proposals Only">Proposal(s)</option>
        <option value="Pictures & Proposals">All</option>
      </select>
      <br>

      <label for="myFile">Upload Attachment(s):</label>
      <br>


      <input type="file" name="filename" id="myFile" multiple>

      <input type="button" value="Submit" onclick="iteratorFileUpload()">


    </form>
  </div>

  <div id="output"></div>
<div id="progressbar">
    <div class="progress-label"></div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script>

var numUploads = {};
numUploads.done = 0;
numUploads.total = 0;

// Upload the files into a folder in drive
// This is set to send them all to one folder (specificed in the .gs file)
function iteratorFileUpload() {
    var allFiles = document.getElementById('myFile').files;

    if (allFiles.length == 0) {
        alert('No file selected!');
    } else {
        //Show Progress Bar

        numUploads.total = allFiles.length;
        $('#progressbar').progressbar({
        value : false
        });//.append("<div class='caption'>37%</div>");
        $(".progress-label").html('Preparing files for upload');
        // Send each file at a time
        for (var i = 0; i < allFiles.length; i++) {
            console.log(i);
            sendFileToDrive(allFiles[i]);
        }
    }
}

function sendFileToDrive(file) {
    var reader = new FileReader();
    reader.onload = function (e) {
        var content = reader.result;
        console.log('Sending ' + file.name);
        var currFolder = 'Something';
        google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, currFolder);
    }
    reader.readAsDataURL(file);
}

function updateProgressbar( idUpdate ){
   console.log('Received: ' + idUpdate);
   numUploads.done++;
   var porc = Math.ceil((numUploads.done / numUploads.total)*100);
   $("#progressbar").progressbar({value: porc });
   $(".progress-label").text(numUploads.done +'/'+ numUploads.total);
   if( numUploads.done == numUploads.total ){
      //uploadsFinished();
      numUploads.done = 0;
   };
}
</script>

  <script>
    function fileUploaded(status) {
      document.getElementById('myForm').style.display = 'none';
      document.getElementById('output').innerHTML = status;
    }

  </script>

  <style>
    body {
      max-width: 400px;
      padding: 20px;
      margin: auto;
    }
    input {
      display: inline-block;
      width: 100%;
      padding: 5px 0px 5px 5px;
      margin-bottom: 10px;
      -webkit-box-sizing: border-box;
      ‌ -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    select {
      margin: 5px 0px 15px 0px;
    }
    input[type="submit"] {
      width: auto !important;
      display: block !important;
    }
    input[type="file"] {
      padding: 5px 0px 15px 0px !important;
    }
#progressbar{
    width: 100%;
    text-align: center;
    overflow: hidden;
    position: relative;
    vertical-align: middle;

}
.progress-label {
      float: left;
margin-top: 5px;
      font-weight: bold;
      text-shadow: 1px 1px 0 #fff;
          width: 100%;
    height: 100%;
    position: absolute;
    vertical-align: middle;
    }
  </style>
</body>

感谢您的任何建议！

我相信您的目标如下。

您只想使用 2 个输入标签将 2 个文件上传到您的 Google 云端硬盘。每个文件大小超过 50 MB。
您希望使用 Web 应用程序来实现这一目标。 HTML 放入 Google Apps 脚本项目中，包括 Web Apps 的脚本。

问题和解决方法：

现阶段，当文件大小超过 50 MB 时，由于 Google 方面当前的规范，无法使用 Google Apps Script 将文件内容直接保存为文件。因此，在这种情况下，需要使用 Drive API 进行断点续传来上传文件。Ref https://developers.google.com/drive/api/guides/manage-uploads#resumable此时就需要编写一个脚本来实现断点续传。但幸运的是，我已经创建了使用 Javascript 库来实现此目的。在这个答案中，我想提出一个使用这个 Javascript 库的示例脚本。

Usage:

1. 为 Web Apps 创建 Google Apps 脚本。

为了使用网络应用程序，请创建一个新的 Google Apps 脚本项目。

2. 示例脚本。

请将以下脚本复制并粘贴到创建的 Google Apps 脚本项目的脚本编辑器中。

Google Apps 脚本端：`Code.gs`

function main() {
  var html = HtmlService.createHtmlOutputFromFile("index");
  SpreadsheetApp.getUi().showSidebar(html);
}

function getAuth() {
  // DriveApp.createFile() // This is used for adding the scope of "https://www.googleapis.com/auth/drive".
  return ScriptApp.getOAuthToken();
}

HTML 和 JavaScript 方面：`index.html`

<input type="file" id="file1" />
<input type="file" id="file2" />
<input type="button" onclick="run()" value="Upload" />
<div id="progress"></div>

<script src="https://cdn.jsdelivr.net/gh/tanaikech/ResumableUploadForGoogleDrive_js@master/resumableupload_js.min.js"></script>
<script>
function run() {
  google.script.run.withSuccessHandler(accessToken => ResumableUploadForGoogleDrive(accessToken)).getAuth();
}

function ResumableUploadForGoogleDrive(accessToken) {
  const f1 = document.getElementById("file1").files[0];
  const f2 = document.getElementById("file2").files[0];
  [f1, f2].forEach((file, i) => {
    if (!file) return;
    let fr = new FileReader();
    fr.fileName = file.name;
    fr.fileSize = file.size;
    fr.fileType = file.type;
    fr.readAsArrayBuffer(file);
    fr.onload = e => {
      var id = "p" + ++i;
      var div = document.createElement("div");
      div.id = id;
      document.getElementById("progress").appendChild(div);
      document.getElementById(id).innerHTML = "Initializing.";
      const f = e.target;
      const resource = { fileName: f.fileName, fileSize: f.fileSize, fileType: f.fileType, fileBuffer: f.result, accessToken: accessToken };
      const ru = new ResumableUploadToGoogleDrive();
      ru.Do(resource, function (res, err) {
        if (err) {
          console.log(err);
          return;
        }
        console.log(res);
        let msg = "";
        if (res.status == "Uploading") {
          msg = Math.round((res.progressNumber.current / res.progressNumber.end) * 100) + "% (" + f.fileName + ")";
        } else {
          msg = res.status + " (" + f.fileName + ")";
        }
        // if (res.status == "Done") google.script.run.putFileInf(res.result);
        document.getElementById(id).innerText = msg;
      });
    };
  });
}
</script>

当您想将上传的文件放到特定文件夹时，请修改const resource = { fileName: f.fileName, fileSize: f.fileSize, fileType: f.fileType, fileBuffer: f.result, accessToken: accessToken };如下。
```
  const resource = { fileName: f.fileName, fileSize: f.fileSize, fileType: f.fileType, fileBuffer: f.result, accessToken: accessToken, folderId: "###folderId###" };
```

3. 启用驱动器 API。

请在高级 Google 服务中启用 Drive API。 https://developers.google.com/apps-script/guides/services/advanced#enable_advanced_services

4. 部署 Web 应用程序。

详细信息可以参见官方文件 https://developers.google.com/apps-script/guides/web#deploy_a_script_as_a_web_app.

在脚本编辑器中，请在脚本编辑器的右上角单击“单击部署”->“新建部署”。
请点击“选择类型”->“Web App”。
请在“部署配置”下的字段中输入有关Web应用程序的信息。
Please select "Me" for "Execute as".
- 这就是这个解决方法的重要性。
Please select "Anyone" for "Who has access".
- 为了测试这个脚本，我认为这个设置可能合适。
请点击“部署”按钮。
Copy the URL of the Web App. It's like https://script.google.com/macros/s/###/exec.
- 当您修改 Google Apps 脚本时，请将部署修改为新版本。这样，修改后的脚本就会反映在Web Apps中。请小心这一点。
- 您可以在“报告”中看到详细信息重新部署 Web 应用程序而不更改新 IDE 的 Web 应用程序 URL https://gist.github.com/tanaikech/ebf92d8f427d02d53989d6c3464a9c43".

5、测试：

作为一个简单的示例脚本，当上面的 HTML 和 Javascript 在侧边栏上运行时，会得到以下结果。当然，这个结果可以通过Web Apps获得。测试此脚本后，可以看到文件可以通过异步过程上传。本次演示来自here https://github.com/tanaikech/AsynchronousResumableUploadForGoogleDrive.

Note:

在本例中，访问令牌是使用以下命令从 Google Apps 脚本端检索的ScriptApp.getOAuthToken()。为了测试这个脚本，您可以使用范围https://www.googleapis.com/auth/drive。但是，如果您想在实际情况下使用此脚本时保持安全性，我建议使用https://www.googleapis.com/auth/drive.file作为范围。这样，访问令牌只能访问该客户端创建的文件。
当您修改 Google Apps 脚本时，请将部署修改为新版本。这样，修改后的脚本就会反映在Web Apps中。请小心这一点。
您可以在“报告”中看到详细信息重新部署 Web 应用程序而不更改新 IDE 的 Web 应用程序 URL https://gist.github.com/tanaikech/ebf92d8f427d02d53989d6c3464a9c43".

参考：

Web Apps https://developers.google.com/apps-script/guides/web
通过 Google Apps 脚本利用 Web Apps https://github.com/tanaikech/taking-advantage-of-Web-Apps-with-google-apps-script
使用 Google Drive 的异步进程断点续传多个文件 https://github.com/tanaikech/AsynchronousResumableUploadForGoogleDrive

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)