如何使用外部html表單將檔案上傳到谷歌驅動器并將其他表單資料保存到谷歌表格？

這是 GAS 代碼：

    var sheetName = 'Sheet1'
    var scriptProp = PropertiesService.getScriptProperties()

    function intialSetup () {
      var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
      scriptProp.setProperty('key', activeSpreadsheet.getId())
    }

   function doPost(e) {

      const folderId = "root"; // Folder ID which is used for putting the file.
      const blob = Utilities.newBlob(
        JSON.parse(e.postData.contents),
        e.parameter.mimeType,
        e.parameter.filename
      );
  const file = DriveApp.getFolderById(folderId).createFile(blob);
  const responseObj = {
    filename: file.getName(),
    fileId: file.getId(),
    fileUrl: file.getUrl(),
  };

  var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    var sheet = doc.getSheetByName(sheetName)

    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    var range = sheet.getRange("A1:A").getValues();
    var filtered_r = range.filter(String).length;

    var newRow = headers.map(function(header) { // newRow is possibly a literally object where the keys are the headers and values are the user input
      if(header === "file"){
        e.parameter[header] = responseObj.fileUrl;
      }
      return e.parameter[header];
    })
  
    sheet.getRange(filtered_r   1, 1, 1, newRow.length).setValues([newRow]);





  return ContentService.createTextOutput(
    JSON.stringify(responseObj)
  ).setMimeType(ContentService.MimeType.JSON);
}

這是外部 html 代碼（不是在 GAS 專案中制作的，這就是為什么我不能使用 google.script.run 方法）

<form id="form">
  <input type="text" name="hobby">
  <input name="file" id="uploadfile" type="file" />
  <input id="submit" type="submit" />
</form>

<script>
  const form = document.getElementById("form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const file = form.file.files[0];
    const fr = new FileReader();
    fr.readAsArrayBuffer(file);
    fr.onload = (f) => {

        
      const url = "https://script.google.com/macros/s/###/exec"; // Please set the URL of Web Apps.

      const qs = new URLSearchParams({
        filename: file.name,
        mimeType: file.type,
      });

      
      fetch(`${url}?${qs}`, {
        method: "POST",
        body: JSON.stringify([...new Int8Array(f.target.result)]), // is it possible to change this value to  new FormData(form)?
      })
        .then((res) => res.json())
        .then(console.log)
        .catch(console.log);
    };
  });
</script>

uj5u.com熱心網友回復：

我相信你的目標如下。

• 您想從 上傳檔案<input name="file" id="uploadfile" type="file" />和值<input type="text" name="hobby">。

當我看到你的腳本時，檔案被發送到 Web Apps。但是，<input type="text" name="hobby">不發送值 from 。我認為這可能是您的問題的原因。為了解決這個問題，修改后的腳本如下。

修改后的腳本：

Google Apps 腳本方面：

在這個修改中，doPost被修改了。

function doPost(e) {
  const obj = JSON.parse(e.postData.contents);
  const folderId = "root"; // Folder ID which is used for putting the file.
  const blob = Utilities.newBlob(
    obj.file,
    e.parameter.mimeType,
    e.parameter.filename
  );
  const file = DriveApp.getFolderById(folderId).createFile(blob);
  const responseObj = {
    filename: file.getName(),
    fileId: file.getId(),
    fileUrl: file.getUrl(),
  };
  obj.file = responseObj.fileUrl;
  var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
  var sheet = doc.getSheetByName(sheetName)
  var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
  var range = sheet.getRange("A1:A").getValues();
  var filtered_r = range.filter(String).length;
  var newRow = headers.map(function (header) {
    return obj[header];
  });
  sheet.getRange(filtered_r   1, 1, 1, newRow.length).setValues([newRow]);
  return ContentService.createTextOutput(
    JSON.stringify(responseObj)
  ).setMimeType(ContentService.MimeType.JSON);
}

HTML & Javascript 方面：

<form id="form">
  <input type="text" name="hobby" id="sample" /> <!-- Modified -->
  <input name="file" id="uploadfile" type="file" />
  <input id="submit" type="submit" />
</form>

<script>
  const form = document.getElementById("form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const file = form.file.files[0];
    const fr = new FileReader();
    fr.readAsArrayBuffer(file);
    fr.onload = (f) => {
      const url = "https://script.google.com/macros/s/###/exec"; 
      const qs = new URLSearchParams({
        filename: file.name,
        mimeType: file.type,
      });
      fetch(`${url}?${qs}`, {
        method: "POST",
        body: JSON.stringify({file: [...new Int8Array(f.target.result)], hobby: document.getElementById("sample").value}),
      })
        .then((res) => res.json())
        .then(console.log)
        .catch(console.log);
    };
  });
</script>

筆記：

• 當您修改 Google Apps 腳本時，請將部署修改為新版本。這樣，修改后的腳本就會反映在 Web Apps 中。請注意這一點。
• 您可以在“重新部署 Web 應用程式而不更改新 IDE 的 Web 應用程式的 URL ”的報告中看到這方面的詳細資訊。

添加：

After I published the sample script https://tanaikech.github.io/2020/08/13/uploading-file-to-google-drive-from-external-html-without-authorization/ you use, I also have published a Javascript library for parsing HTML form for using with Google Apps Script. Ref When this library is used, your script is as follows.

Sample script:

Google Apps Script side:

In this modification, doPost is modified.

function doPost(e) {
  const obj = JSON.parse(e.postData.contents);
  const folderId = "root"; // Folder ID which is used for putting the file.
  const f = obj.file[0].files[0];
  const blob = Utilities.newBlob(
    f.bytes,
    f.mimeType,
    f.filename
  );
  const file = DriveApp.getFolderById(folderId).createFile(blob);
  const responseObj = {
    filename: file.getName(),
    fileId: file.getId(),
    fileUrl: file.getUrl(),
  };
  obj.file = [{ value: responseObj.fileUrl }];
  var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'));
  var sheet = doc.getSheetByName(sheetName)
  var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
  var range = sheet.getRange("A1:A").getValues();
  var filtered_r = range.filter(String).length;
  var newRow = headers.map(function (header) {
    return obj[header][0].value;
  })
  sheet.getRange(filtered_r   1, 1, 1, newRow.length).setValues([newRow]);
  return ContentService.createTextOutput(
    JSON.stringify(responseObj)
  ).setMimeType(ContentService.MimeType.JSON);
}

HTML & Javascript side:

<form id="form">
  <input type="text" name="hobby" id="sample" /> <!-- Modified -->
  <input name="file" id="uploadfile" type="file" />
  <input id="submit" type="submit" />
</form>

<script src="https://cdn.jsdelivr.net/gh/tanaikech/HtmlFormObjectParserForGoogleAppsScript_js@master/htmlFormObjectParserForGoogleAppsScript_js.min.js"></script>
<script>
  const url = "https://script.google.com/macros/s/###/exec";
  const form = document.getElementById("form");
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const obj = await ParseFormObjectForGAS(form);
    fetch(url, {
      method: "POST",
      body: JSON.stringify(obj),
    })
    .then((res) => res.json())
    .then(console.log)
    .catch(console.log);
  });
</script>

Reference:

• HtmlFormObjectParserForGoogleAppsScript_js

標籤：javascript html 谷歌应用程序脚本

上一篇：獲取物件DriveApp上的方法或屬性getFileById時出現意外錯誤

下一篇：如何為谷歌網路應用程式腳本進行自動對焦？