那些遇到过的问题

使用 Google Apps 脚本将文件上传到我的谷歌驱动器（GOOGLE 中没有表格）

Mar*_* Dz 1 javascript ajax jquery google-apps-script

所以基本上任务很简单，但我没有找到任何可行的解决方案来解决我的问题。我的网站上有一个巨大的上传脚本（目前是本地主机），但让我们将所有复杂性降低到唯一必要的程度。

所以我只想使用 Google App Script 将单个文件上传到 Google Drive 并接收它的 URL 以将其保存在 var 中，以便在我的函数中稍后处理该信息。

现在的问题是我的网站上已经有了表单，我不希望 script.google.com 中的表单作为额外的 html，我想将我的用户输入传输到 Google App Script，然后将其上传到 google drive 并返回 url回到我的网站，我可以将它保存到一个 var 中。

我现在的问题是，我不能把所有的东西放在一起。

这是我网站上的表格（简化版）：

<form name="myForm" method="post">
            <!-- <form name="first-form"> -->

  <input type="text" placeholder="Name" id="myName">
  <input type="file" name="myFile" id="myFile">
  <button onclick="UploadFile()" type="submit">submit</button>

</form>
Run Code Online (Sandbox Code Playgroud)

那么如何将我的信息上传到谷歌驱动器中并获得结果呢？如何在不使用 iFrame 或其他任何东西的情况下推送 Google App Script 中的数据？

谢谢你！

**** 工作示例，如果 html 在 scripts.google.com 中 ****

GS

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('forms.html').setTitle("Google File Upload by CTRLQ.org");
}


function uploadFileToGoogleDrive(data, file, name, email) {
  
  try {
    
    var dropbox = "Received Files";
    var folder, folders = DriveApp.getFoldersByName(dropbox);
    
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    
    /* Credit: www.labnol.org/awesome */
    
    var contentType = data.substring(5,data.indexOf(';')),
        bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)),
        blob = Utilities.newBlob(bytes, contentType, file),
        file = folder.createFolder([name, email].join(" ")).createFile(blob);
    
    return "OK";
    
  } catch (f) {
    return f.toString();
  }
  
}
Run Code Online (Sandbox Code Playgroud)

apps.googlescript 中的 html

<!DOCTYPE html>
<html>
  <head>
    <base target="_blank">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google File Upload by CTRLQ.org</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
    <style>
      .disclaimer{width: 480px; color:#646464;margin:20px auto;padding:0 16px;text-align:center;font:400 12px Roboto,Helvetica,Arial,sans-serif}.disclaimer a{color:#009688}#credit{display:none}
    </style>
  </head>
  <body>

    <!-- Written by Amit Agarwal amit@labnol.org --> 

    <form class="main" id="form" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;">
      <div id="forminner">
        <div class="row">
          <div class="col s12">
            <h5 class="center-align teal-text">Upload Files to my Google Drive</h5>
            <p class="disclaimer">This <a href="http://www.labnol.org/internet/file-upload-google-forms/29170/">File Upload Form</a> (<a href="https://youtu.be/C_YBBupebvE">tutorial</a>) is powered by <a href="https://ctrlq.org/code/19747-google-forms-upload-files" target="_blank">Google Scripts</a></p>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <input id="name" type="text" name="Name" class="validate" required="" aria-required="true">
            <label for="name">Name</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <input id="email" type="email" name="Email" class="validate" required="" aria-required="true">
            <label for="email">Email Address</label>
          </div>
        </div>

        <div class="row">
          <div class="file-field input-field col s12">
            <div class="btn">
              <span>File</span>
              <input id="files" type="file">
            </div>
            <div class="file-path-wrapper">
              <input class="file-path validate" type="text" placeholder="Select a file on your computer">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="input-field col s6">
            <button class="waves-effect waves-light btn submit-btn" type="submit" onclick="submitForm(); return false;">Submit</button>
          </div>   
        </div>
        <div class="row">
          <div class="input-field col s12" id = "progress">
          </div>
        </div>
      </div>
      <div id="success" style="display:none">
        <h5 class="left-align teal-text">File Uploaded</h5>
        <p>Your file has been successfully uploaded.</p>
        <p>The <a href="http://www.labnol.org/internet/file-upload-google-forms/29170/">pro version</a> (see <a href="">demo form</a>) includes a visual drag-n-drop form builder, CAPTCHAs, the form responses are saved in a Google Spreadsheet and respondents can upload multiple files of any size.</p>    
        <p class="center-align"><a  class="btn btn-large" href="https://gum.co/GA14?wanted=true" target="_blank">Upgrade to Pro</a></p>
      </div>
    </form>

    <div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
      <a class="btn-floating btn-large red">
        <i class="large material-icons">menu</i>
      </a>
      <ul>
        <li><a class="btn-floating red"  href="https://gum.co/GA14" target="_blank" title="Buy License - File Upload Form"><i class="material-icons">monetization_on</i></a></li>
        <li><a class="btn-floating blue"  href="https://youtu.be/C_YBBupebvE" target="_blank" title="Video Tutorial"><i class="material-icons">video_library</i></a></li>
        <li><a class="btn-floating green" href="http://www.labnol.org/internet/file-upload-google-forms/29170/" target="_blank" title="How to Create File Upload Forms"><i class="material-icons">help</i></a></li>
      </ul>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
    <script src="https://gumroad.com/js/gumroad.js"></script>

    <script>

      var file, 
          reader = new FileReader();

      reader.onloadend = function(e) {
        if (e.target.error != null) {
          showError("File " + file.name + " could not be read.");
          return;
        } else {
          google.script.run
            .withSuccessHandler(showSuccess)
            .uploadFileToGoogleDrive(e.target.result, file.name, $('input#name').val(), $('input#email').val());
        }
      };

      function showSuccess(e) {
        if (e === "OK") { 
          $('#forminner').hide();
          $('#success').show();
        } else {
          showError(e);
        }
      }

      function submitForm() {

        var files = $('#files')[0].files;

        if (files.length === 0) {
          showError("Please select a file to upload");
          return;
        }

        file = files[0];

        if (file.size > 1024 * 1024 * 5) {
          showError("The file size should be < 5 MB. Please <a href='http://www.labnol.org/internet/file-upload-google-forms/29170/' target='_blank'>upgrade to premium</a> for receiving larger files in Google Drive");
          return;
        }

        showMessage("Uploading file..");

        reader.readAsDataURL(file);

      }

      function showError(e) {
        $('#progress').addClass('red-text').html(e);
      }

      function showMessage(e) {
        $('#progress').removeClass('red-text').html(e);
      }


    </script>

  </body>

</html>
Run Code Online (Sandbox Code Playgroud)

正如推荐的那样，我将在这里描述这个过程。

所以我们在网站：www.example.com 上，有一个带有文本输入字段和文件字段的表单。假设我们放入一个图像并将其称为示例。现在，如果我们按下提交，我想将图像上传到谷歌驱动器而不需要任何 oAuth（这就是为什么我们需要在此处使用谷歌应用程序脚本）并将其命名为我们在文本字段中输入的内容。上传完成后，我希望将 google drive 图像的 url 返回到网站，以便表单可以继续处理信息。我想将返回的 url 保存在 var 中，稍后将其保存在数据库中。这就是为什么我需要将结果返回到我的网站。

所以方案如下所示：

在网站上输入信息 -> 重定向到谷歌应用程序脚本：获取网站表单字段的信息并将文件上传到谷歌驱动器并将其命名为文本输入条目 -> 将谷歌驱动器的 url 作为最终结果 -> 重定向最终 url 结果到网站 -> 将 url 结果保存到 var 并继续从网站上的函数中执行操作 -> 最后将信息从 var 保存到数据库 -> 完成

- - - - - - - - - - - - - - - - - - - - - - - - 编辑： ------------------

感谢@Tanaike 我更接近我在这里挑战的目标，所以为了看看我卡在哪里，我现在复制我的问题：

我从您的示例中获取了带有脚本的表单：

<form id="form">
  <input name="file" id="uploadfile" type="file">
  <input name="filename" id="filename" type="text">
  <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: form.filename.value || file.name, mimeType: file.type});
    fetch(`${url}?${qs}`, {method: "POST", body: JSON.stringify([...new Int8Array(f.target.result)])})
    .then(res => res.json())
    .then(e => console.log(e))  // <--- You can retrieve the returned value here.
    .catch(err => console.log(err));
  }
});
</script>
Run Code Online (Sandbox Code Playgroud)

对于谷歌脚本：

function doPost(e) {
  // const folderId = "###";  // Folder ID which is used for putting the file, if you need.

  const blob = Utilities.newBlob(JSON.parse(e.postData.contents), e.parameter.mimeType, e.parameter.filename);
  const file = DriveApp.getFolderById(folderId || "root").createFile(blob);
  const responseObj = {filename: file.getName(), fileId: file.getId(), fileUrl: file.getUrl()};
  return ContentService.createTextOutput(JSON.stringify(responseObj)).setMimeType(ContentService.MimeType.JSON);
}
Run Code Online (Sandbox Code Playgroud)

现在，当我尝试上传内容时出现以下错误：CORS 政策无法获取。所以我将这部分更改为以下内容并添加了无 cors 模式：

const qs = new URLSearchParams({filename: form.filename.value || file.name, mimeType: file.type});
        fetch(`${url}?${qs}`, {method: "POST", mode: "no-cors", body: JSON.stringify([...new Int8Array(f.target.result)])})
Run Code Online (Sandbox Code Playgroud)

这奏效了。第二次尝试上传导致以下错误的文件：它说： syntax error: unexpected end of input

所以我改变了这一行并从 res.json 中删除了括号

JSON.stringify([...new Int8Array(f.target.result)])})
        .then(res => res.json)
Run Code Online (Sandbox Code Playgroud)

第三次尝试上传文件，实际使用以下控制台结果：

ƒ json() { [native code] }
Run Code Online (Sandbox Code Playgroud)

但是谷歌驱动器中没有上传文件。我在某处遗漏了一些东西。也许我们应该创建一个文件夹并将文件放在那里。

哦还有另一个信息：当我在 google app sript 中运行 doPost 函数时，它说：

TypeError: Cannot read property 'postData' of undefined (line 13
Run Code Online (Sandbox Code Playgroud)

EDIT2 -----------------------------------------

我将https://drive.google.com/uc?export=download&id=###fileId###添加到您的代码中，一切正常。文件正在上传。

假设我们上传文件 test.mp3 并将其称为 testdata。这是我们收到的：

{
  "filename": "testdata",
  "fileId": "###some id##",
  "fileUrl": "https://drive.google.com/uc?export=download&id=###fileId###"
}
Run Code Online (Sandbox Code Playgroud)

现在，当我打开文件 url 时，浏览器会下载文件，但它的名称是：testdata，而不是 testdata.mp3。文件类型结尾丢失。

第二个任务：如果您单击链接，我想在浏览器中打开文件，例如当它的 mp3 文件时，我希望您可以在 webview 中播放声音，就像这里一样：https : //files.freemusicarchive.org/ storage-freemusicarchive-org/music/Creative_Commons/Dead_Combo/CC_Affiliates_Mixtape_1/Dead_Combo_-_01_-_Povo_Que_Cas_Descalo.mp3

我希望你能指导我！

Tan*_*ike 6

我相信你的目标如下。

  • 您的网站与 Google 帐户无关。它是独立的。
  • 您的网站有一个用于上传文件的表单。
  • 当用户提交表单时，您想在未经授权的情况下将文件上传到您的 Google Drive，并希望返回上传文件在 Google Drive 上的 URL。
  • 关于“数据库”，这是您的数据库。您将检索到的文件 URL 放到客户端的“数据库”中。

在这种情况下，我认为使用 Google Apps Script 创建的 Web Apps 可以实现您的目标。

用法：

请执行以下流程。

1. 创建新的 Google Apps Script 项目。

Web Apps 的示例脚本是 Google Apps 脚本。所以请创建一个 Google Apps Script 项目。

如果你想直接创建它，请访问https://script.new/。在这种情况下，如果您未登录 Google，则会打开登录屏幕。所以请登录谷歌。这样，Google Apps Script 的脚本编辑器就打开了。

2. 准备脚本。

请将以下脚本（Google Apps 脚本）复制并粘贴到脚本编辑器中。此脚本适用于 Web 应用程序。

服务器端：Google Apps 脚本

请设置要放置文件的文件夹 ID。

function doPost(e) {
  const folderId = "root";  // Or Folder ID which is used for putting the file instead of "root", if you need.

  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()};
  return ContentService.createTextOutput(JSON.stringify(responseObj)).setMimeType(ContentService.MimeType.JSON);
}
Run Code Online (Sandbox Code Playgroud)

3. 部署 Web 应用程序。

  1. 在脚本编辑器上，通过“发布”->“部署为 Web 应用程序”打开一个对话框。
  2. 为“将应用程序执行为：”选择“我”。
    • 通过这种方式，脚本以所有者身份运行。
  3. 为“谁有权访问应用程序：”选择“任何人，甚至匿名”。
  4. 单击“部署”按钮作为新的“项目版本”。
  5. 自动打开“需要授权”对话框。
    1. 单击“查看权限”。
    2. 选择自己的帐户。
    3. 在“此应用程序未经验证”处单击“高级”。
    4. 点击“转到###项目名称###（不安全）”
    5. 单击“允许”按钮。
  6. 单击“确定”。
  7. 复制 Web 应用程序的 URL。就像https://script.google.com/macros/s/###/exec.
    • 当您修改 Google Apps 脚本时，请重新部署为新版本。这样，修改后的脚本就会反映到 Web Apps 中。请注意这一点。

4. 从客户端上传文件到服务器端。

客户端：HTML & Javascript

请将您的 Web 应用程序的 URL 设置为以下脚本。

<form id="form">
  <input name="file" id="uploadfile" type="file">
  <input name="filename" id="filename" type="text">
  <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: form.filename.value || file.name, mimeType: file.type});
    fetch(`${url}?${qs}`, {method: "POST", body: JSON.stringify([...new Int8Array(f.target.result)])})
    .then(res => res.json())
    .then(e => console.log(e))  // <--- You can retrieve the returned value here.
    .catch(err => console.log(err));
  }
});
</script>
Run Code Online (Sandbox Code Playgroud)
  • 在客户端，当您从本地 PC 中选择一个文件并按下按钮时，通过在 Web Apps（服务器端）检索数据，该文件将上传到您的 Google Drive。
结果：

运行上述脚本时，将返回以下值。从中，您可以检索文件的 URL。

{
  "filename": "### inputted filename ###",
  "fileId": "###",
  "fileUrl": "https://drive.google.com/file/d/###/view?usp=drivesdk"
}
Run Code Online (Sandbox Code Playgroud)

笔记：

  • 当您修改 Web Apps 的脚本时，请将 Web Apps 重新部署为新版本。这样，最新的脚本就会反映到 Web Apps 中。请注意这一点。
  • 在上面的脚本中，最大文件大小为 50 MB。因为在当前阶段，Google Apps Script 的最大 blob 大小为 50 MB。

参考：

归档时间：

查看次数：

11827 次

最近记录：

4 年，4 月 前
相关归档
在JavaScript中生成随机字符串/字符 1593
我想从String中删除双引号 220
Date(dateString)和new Date(dateString)之间的区别 49
在Google文档中以编程方式创建锚定注释 35
未捕获的TypeError:$ .ajax(...).success不是函数 35
JQuery UI:将长元素拖放到光标位置而不是元素的中间位置 32
从谷歌应用脚​​本发送聊天消息 6
PHP网站只在查询时传递特定信息 4
有没有办法更改通过 Google Apps Script 发送的电子邮件中的显示名称？ 4
google-docs api的数据类型和控制结构 1
难疑归档
什么是Python中的元类？ 5409
package.json中的波浪号(〜)和插入符号(^)有什么区别？ 3111
在shell中,"2>&1"是什么意思？ 2121
如何检查对象是否在JavaScript中具有属性？ 1396
如何在git历史中grep(搜索)已提交的代码？ 1342
如何在同一元素上组合背景图像和CSS3渐变？ 1203
如何以CSV格式输出MySQL查询结果？ 1118
如何在同一分支上的两个不同提交之间区分相同的文件？ 1077
用PHP清理用户输入的最佳方法是什么？ 1069
如何查找Python中是否存在目录 1048