使用 Google API 时的空白 PDF 文件答案

【问题标题】：Blank PDF files when using Google API使用 Google API 时的空白 PDF 文件
【发布时间】：2020-07-04 17:33:25
【问题描述】：

我正在使用 Google App 脚本使用户能够将 PDF 文件上传到我的 Google 驱动器文件夹之一。乍一看，一切似乎都很完美，但是当我去文件夹检查收到的 PDF 文件时，我只得到空白 PDF！

有人遇到过这个问题吗？如果是的话，你能帮帮我吗？

这是我的 2 个脚本：

server.gs：

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');

}

function uploadFiles(form) {

  try {

    var dropbox = "Travaux_T°S";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

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

    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    file.setDescription("Uploaded by " + form.myName);

    return "Et hop: une copie de plus à corriger ! :)" ;

  } catch (error) {

    return error.toString();
  }

}

form.html：

<!doctype html>
<style type="text/css">
body {
    background-color: #FFFFFF;
}
</style>
<BR>
<BR>
<BR>
<div align="center">
  <p><img src="https://cdn.pixabay.com/photo/2017/04/25/22/28/despaired-2261021_960_720.jpg" width="50%" height="50%"></p>
  <table width="459" border="0">
    <tbody>
      <tr>
        <td width="462"><div align="center">
          <hr>
        </div>
          <form id="myForm" align="center">
            <input type="text" name="myName" placeholder="NOM_Prenom">
            <input type="file" name="myFile">
            <input type="submit" value="Envoyer le fichier" 
           onclick="this.value='Uploading..';
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    return false;">
          </form>
          <div id="output"></div>
          <script>
    function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').innerHTML = status;
    }
          </script>
        <style>
 input { display:block; margin: 20px; }

          </style>
        <hr></td>
      </tr>
    </tbody>
  </table>
  <h3>&nbsp;</h3>
  <p>&nbsp;</p>
</div>

提前非常感谢！ :)

【问题讨论】：

标签： forms google-apps-script file-upload web-applications google-drive-api

【解决方案1】：

使用`this.parentNode` 上传并不总是适用于所有文件类型。

相反，Filereader 是一个优雅可靠的上传过程。

示例

代码.gs：

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');

}

function uploadFiles(blob, name, description) {

  try {

    var dropbox = "Travaux_T°S";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

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

    var blob = blob.split(",")
    var blob = Utilities.newBlob(Utilities.base64Decode(blob[1]), 'application/pdf');
    console.log(blob);
    var fileName = blob.setName(name).getName(); 
    var file = folder.createFile(blob); 
    file.setDescription("Uploaded by " + description);    
    return "Et hop: une copie de plus à corriger ! :)" ;

  } catch (error) {

    return error.toString();
  } 
}

form.html:

<!doctype html>
<style type="text/css">
body {
background-color: #FFFFFF;
}
</style>
<BR>
<BR>
<BR>
<div align="center">
<p><img src="https://cdn.pixabay.com/photo/2017/04/25/22/28/despaired-2261021_960_720.jpg" width="50%" height="50%"></p>
<table width="459" border="0">
<tbody>
<tr>
<td width="462"><div align="center">
<hr>
</div>
<form id="myForm" align="center">
<input type="text" name="myName" placeholder="NOM_Prenom">
<input type="file" name="myFile">
<input type="submit" value="Envoyer le fichier" 
onclick="upload()" >
</form>
<div id="output"></div>
<script>   
function upload() {
var file = document.getElementsByName('myFile')[0].files[0];
var description = document.getElementsByName('myName')[0].value;
var reader = new FileReader();
reader.onload = function (e) {
var content = reader.result;
console.log('Sending ' + file.name);
var currFolder = 'Google_Dropbox';
google.script.run.withSuccessHandler(fileUploaded).uploadFiles(content, file.name, description);
return false;
}
reader.readAsDataURL(file);
}   

function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}    
</script>
<style>
input { display:block; margin: 20px; }

          </style>
        <hr></td>
      </tr>
    </tbody>
  </table>
  <h3>&nbsp;</h3>
  <p>&nbsp;</p>
</div>

【讨论】：

非常感谢@Ziganotschka，“FileReader() 确实解决了我的问题！但是我丢失了通知用户文件已正确发送的“上传消息”和“返回消息”（它提供了一个空白网页）。您是否有一个关于如何解决这个问题的快速想法？
我不太确定空白页的原因是什么，但解决方法是：function fileUploaded(status) {alert(status);}。
看来问题不在于this.parentNode，而是在v8 上使用<input type="file" />。禁用新的运行时可能会解决问题，但有时实际的解决方案是改用FileReader。
我无法确认“问题不是 this.parentNode 而是使用 <input type="file" /> 在 v8 中不起作用” - 它在我上面的代码中起作用，所以如果有一个相关的错误它可能有已经修好了。但是，this.parentNode 在 v8 中可能存在问题。

使用this.parentNode 上传并不总是适用于所有文件类型。

使用`this.parentNode` 上传并不总是适用于所有文件类型。