Google Apps 脚本是 corrupting/blanking-out 通过我创建的表单上传的所有文件。我该如何解决？

Question

我已经使用 Google Apps 脚本表单将收据上传到 Google Drive 几年了，没有出现任何问题。几个月前，文件开始显示为完全空白或损坏。虽然文件将出现在云端硬盘中，但我无法打开它，或者如果它是 PDF，它的页数相同但完全空白。似乎只有文本文件有效。

我从概念上理解，我需要添加一个函数让脚本在前端处理文件，然后传递给服务器（基于 and ）。但我似乎无法正确编写脚本，因为我的结构非常不同，坦率地说，这让我感到困惑。

这是我的form.html:

    <!doctype html>
     <form id="myForm" align="left">
            Your first name: <input type="text" name="myName"><br><br>
            <input type="file" name="myFile1"><input type="text" name="myReceipt1" placeholder="Vendor (who was paid)...">
            <input type="text" name="myProgram1" placeholder="GenOps, OWP, VSP, etc."><br>
            <input type="text" name="myDesc1" placeholder="Expense Desc (e.g. catering, airfare, etc.)" style="width:300px;"><br>
            <input type="date" name="myDate1" placeholder="Date Charged (yyyy.mm.dd)" style="width:200px;">
            <input type="text" name="myAmt1" placeholder="Amount (dd.cc)"><br>
            
            <input type="file" name="myFile2"><input type="text" name="myReceipt2" placeholder="Vendor (who was paid)...">
            <input type="text" name="myProgram2" placeholder="GenOps, OWP, VSP, etc."><br>
            <input type="text" name="myDesc2" placeholder="Expense Desc (e.g. catering, airfare, etc.)" style="width:300px;"><br>
            <input type="date" name="myDate2" placeholder="Date Charged (yyyy.mm.dd)" style="width:200px;">
            <input type="text" name="myAmt2" placeholder="Amount (dd.cc)"><br>

            
            <input type="submit" value="Upload File(s)" style="background-color:#ffd382"
            
            onclick="this.value='Uploading...';
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    return false;">
     </form>

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

这是我的server.gs:

function doGet(e) {
    return HtmlService.createTemplateFromFile('form.html')
        .evaluate() // evaluate MUST come before setting the Sandbox mode
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
        .setTitle("AmEx Receipt Upload");8       
}

function uploadFiles(form) {
  
  try {
    
    var dropbox = "Receipts";  //name of Drive folder to save uploaded files
    var folder, folders = DriveApp.getFoldersByName(dropbox);
    
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    
    var blob = form.myFile1;
    var file = folder.createFile(blob);    
    file.setDescription("Uploaded by " + form.myName);
    file.setName(form.myDate1 + "_" + form.myReceipt1 + "_" + form.myProgram1 + "_" + form.myDesc1 + " - " + form.myAmt1);
    
    var blob = form.myFile2;    
    var file = folder.createFile(blob);    
    file.setDescription("Uploaded by " + form.myName);
    file.setName(form.myDate2 + "_" + form.myReceipt2 + "_" + form.myProgram2 + "_" + form.myDesc2 + " - " + form.myAmt2);

    return "Your receipts have been uploaded. Refresh the page if you have more to upload.";
    
  } catch (error) { 
    return error.toString();
  }      
}

如果您能提供任何帮助，我们将不胜感激。似乎我所做的每一次调整只会让事情变得更糟。如果你需要我比我更简单的代码片段，我当然可以。

提前致谢！

Answer 1

修改点：

我认为上传文件损坏的问题可能与的问题相同。
为了避免破坏上传的文件，例如需要将文件转换为字节数组和base64，然后发送到Google Apps Script。
但是当我看到你的脚本时，我认为为了在上面使用，需要发送 2 个文件和几个值，并且需要修改 Javascript 和 Google Apps 脚本.我认为这可能有点复杂。所以我提出了修改后的脚本作为答案。

修改后的脚本：

在此修改中，文件被转换为字节数组并发送到 Google Apps 脚本。

HTML&Javascript 边:

<form id="myForm" align="left">
Your first name: <input type="text" name="myName"><br><br>
<input type="file" name="myFile1">
<input type="text" name="myReceipt1" placeholder="Vendor (who was paid)...">
<input type="text" name="myProgram1" placeholder="GenOps, OWP, VSP, etc."><br>
<input type="text" name="myDesc1" placeholder="Expense Desc (e.g. catering, airfare, etc.)" style="width:300px;"><br>
<input type="date" name="myDate1" placeholder="Date Charged (yyyy.mm.dd)" style="width:200px;">
<input type="text" name="myAmt1" placeholder="Amount (dd.cc)"><br>

<input type="file" name="myFile2">
<input type="text" name="myReceipt2" placeholder="Vendor (who was paid)...">
<input type="text" name="myProgram2" placeholder="GenOps, OWP, VSP, etc."><br>
<input type="text" name="myDesc2" placeholder="Expense Desc (e.g. catering, airfare, etc.)" style="width:300px;"><br>
<input type="date" name="myDate2" placeholder="Date Charged (yyyy.mm.dd)" style="width:200px;">
<input type="text" name="myAmt2" placeholder="Amount (dd.cc)"><br>
<input type="submit" value="Upload File(s)" style="background-color:#ffd382" onclick="submitValues(this);return false;">
</form>

<div id = "output"></div>

<script>
function submitValues(e) {
  e.value = 'Uploading...';
  const files = [e.parentNode.myFile1.files[0], e.parentNode.myFile2.files[0]];
  const object = [...e.parentNode].reduce((o, obj) => Object.assign(o, {[obj.name]: obj.value}), {});
  if (files.some(f => f)) {
    Promise.all(
      files.map(file => new Promise((resolve, reject) => {
        if (file) {
          const fr = new FileReader();
          fr.onload = f => resolve({filename: file.name, mimeType: file.type, bytes: [...new Int8Array(f.target.result)]});
          fr.onerror = err => reject(err);
          fr.readAsArrayBuffer(file);
        } else {
          resolve({});
        }
      }))
    ).then(ar => {
      [object.myFile1, object.myFile2] = ar;
      google.script.run.withSuccessHandler(fileUploaded).uploadFiles(object);
    });
  }
}

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

Google Apps 脚本端：

在这种情况下，uploadFiles被修改。

function uploadFiles(form) {
  try {
    var dropbox = "Receipts";  //name of Drive folder to save uploaded files
    var folder, folders = DriveApp.getFoldersByName(dropbox);
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    
    // --- I modified below script.
    var file1 = form.myFile1;
    if (Object.keys(file1).length > 0) {
      var blob = Utilities.newBlob(file1.bytes, file1.mimeType, file1.filename);  // Modified
      var file = folder.createFile(blob);    
      file.setDescription("Uploaded by " + form.myName);
      file.setName(form.myDate1 + "_" + form.myReceipt1 + "_" + form.myProgram1 + "_" + form.myDesc1 + " - " + form.myAmt1);
    }
    var file2 = form.myFile2;
    if (Object.keys(file2).length > 0) {
      var blob = Utilities.newBlob(file2.bytes, file2.mimeType, file2.filename);  // Modified
      var file = folder.createFile(blob);    
      file.setDescription("Uploaded by " + form.myName);
      file.setName(form.myDate2 + "_" + form.myReceipt2 + "_" + form.myProgram2 + "_" + form.myDesc2 + " - " + form.myAmt2);
    }
    // ---
    
    return "Your receipts have been uploaded. Refresh the page if you have more to upload.";
  } catch (error) { 
    return error.toString();
  }
}

注：

在这种情况下，最大文件大小小于 50 MB，因为 blob 在 Google Apps 脚本中使用。请注意这一点。
在我的环境中，我可以确认建议的脚本有效。但是，如果脚本在您的环境中不起作用，您能否提供用于复制问题的脚本？借此，我想确认一下。

Google Apps 脚本是 corrupting/blanking-out 通过我创建的表单上传的所有文件。我该如何解决？

Google Apps Script is corrupting/blanking-out all files uploaded through a form I created. How do I fix this?

file-upload

web-applications

google-apps-script

修改点：

修改后的脚本：

HTML&Javascript 边:

Google Apps 脚本端：

注：

参考文献：