如何通过 POST (doPost) 将文件上传到 Google Script 的 Web 应用程序?

IT技术 javascript google-apps-script google-apps
2021-02-26 06:29:32

我的问题和这个完全一样:Upload a file to a Google Web Apps with doPost

如何将文件从另一个域直接上传到 Google Script 的 Web 应用程序?我在那个问题中回答了一个解决方法,将文件转换为 base64 字符串,但问题仍然存在。是否可以将文件上传到 Google Scripts 或仅上传字符串?

1个回答

文件不能通过 GAS 的“doPost()”从本地 PC 上的 HTML 格式直接上传。因为“multipart/form-data”可能无法用于“doPost()”。因此,如您所说,转换 Base64 会导致解决方案。

通过“doPost()”上传文件有两种方式。

1. 从 GAS 项目的 HTML 表单上传文件

这将在 GAS 项目中使用 GAS 和 HTML 上传文件。在这种情况下,文件不会通过脚本转换为 Base64。(它可以作为内部过程进行转换。)

2.从本地PC上的HTML表单上传文件

这将从本地 PC 上的 HTML 表单上传文件。GAS 控制“doPost()”。在这种情况下,文件被编码为 Base64 并作为文本数据上传,然后使用 GAS 解码为文件。


1. 从 GAS 项目的 HTML 表单上传文件

规则

  1. 必须将以下示例脚本和 HTML 制作成 Google Apps Script 的项目。

  2. 将 GAS 项目部署为 Web 应用程序。https://developers.google.com/apps-script/guides/web并检索 URL。

  3. 更新脚本后,必须将其更新为新版本。

表单.html

<html>
  <body>
    <form>
      <input type="file" name="upFile">
      <input type="button" value="ok" onclick="google.script.run.upload(this.parentNode)">
    </form>
  </body>
</html>

脚本

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Form.html');
}

function upload(e) {
  DriveApp.createFile(e.upFile);
}

2.从本地PC上的HTML表单上传文件

规则与上面的几乎相同。该脚本放置在 GAS 项目中。但是 HTML 表单是放在本地 PC 上的。

脚本

function doGet(e) {
  return message("Error: no parameters");
}

function doPost(e) {
  if (!e.parameters.filename || !e.parameters.file) {
    return message("Error: Bad parameters");
  } else {
    var data = Utilities.base64Decode(e.parameters.file, Utilities.Charset.UTF_8);
    var blob = Utilities.newBlob(data, MimeType.PNG, e.parameters.filename);
    DriveApp.createFile(blob);
    return message("completed");
  }
}

function message(msg) {
  return ContentService.createTextOutput(JSON.stringify({result: msg})).setMimeType(ContentService.MimeType.JSON);
}

HTML :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
</head>
<body>
    <input type="file" id="file">

    <script type="text/javascript">
        $(function(){
            var url = 'https://script.google.com/macros/s/[Project ID]/exec';
            var params = {
                filename: 'samplefile',
                imageformat: 'PNG'
            };

            $('#file').on("change", function() {
                var file = this.files[0];
                var fr = new FileReader();
                fr.onload = function(e) {
                    params.file = e.target.result.replace(/^.*,/, '');
                    postJump();
                }
                fr.readAsDataURL(file);
            });

            function postJump(){
                var html = '<form method="post" action="'+url+'" id="postjump" style="display: none;">';
                Object.keys(params).forEach(function (key) {
                    html += '<input type="hidden" name="'+key+'" value="'+params[key]+'" >';
                });
                html += '</form>';
                $("body").append(html);
                $('#postjump').submit();
                $('#postjump').remove();
            }
        });
    </script>
</body>
</html>

此示例脚本假设上传一个 PNG 文件作为测试。如果您想上传其他文件,请更改 MIME 类型。https://developers.google.com/apps-script/reference/base/mime-type

对于 HTML 示例,选择文件时将上传文件。

如果这对你有帮助,我很高兴。

@duhaime 当数据被编码为 Base64 时,为了删除不需要的部分并将其用作 blob,使用。
2021-04-24 06:29:32
@Tanaike 我唯一的问题是:为什么要使用.replace(/^.*,/, '')输入数据?如果您能就这个问题提供任何见解,我将不胜感激。
2021-05-09 06:29:32
@Tanaike 这非常有帮助,就像您的博客一样。感谢您的杰出工作!
2021-05-17 06:29:32
@duhaime 欢迎。也感谢您访问我的博客。
2021-05-18 06:29:32
谢谢你的澄清。我已经了解 base64 文件,但不确定是否允许直接上传文件
2021-05-18 06:29:32