如何在 Google Apps Script 中获取多个上传图片的 Base64 内容？

Question

我正在使用 Google Apps 脚本在 Google 表格中创建一个侧边栏表单，用户可以在其中上传至少一张图片。之后，我想获取每个图像的 Base64 编码内容和图像的文件名。然后，我将向 SendGrid 的 API 发出请求，以创建并发送一封电子邮件，其中附件是用户上传的图像。

这是我目前的代码：

Form.html

<form onsubmit="handleFormSubmit(this)">
    <div class="custom-file">
        <input type="file" class="custom-file-input" id="images_input" name="images_input" multiple required>
        <label class="custom-file-label" for="images_input">Select images...</label>
    </div> 
    <button type="submit">Submit</button>
</form>

<script>
function handleFormSubmit(formObject) {
    google.script.run.processForm(formObject);
}
</script>

代码.gs

function processForm(formObject) {
    var images = formObject.images_input;
    var base64Images = Utilities.base64Encode(images);

    // Set up the request to SendGrid
    var API_KEY = PropertiesService.getScriptProperties().getProperty('API_KEY');
    var sendGridUrl = 'https://api.sendgrid.com/v3/mail/send';

    var headers = {
        'Authorization': 'Bearer ' + API_KEY
    };

    var data = {
        "personalizations": [{
            "to": [{
                "email": ...
            }],
            "dynamic_template_data": {
                ...
            }
        }],
        "attachments": [{
            "content": base64Images,
            "filename": "somefilename"
        }],
        "from": {
            "email": ...
        },
        "template_id": ...",
    };

    var options = {
        'method': 'post',
        'contentType': 'application/json',
        'headers': headers,
        'payload': JSON.stringify(data)
    };

    UrlFetchApp.fetch(sendGridUrl, options);
}

它不起作用（显然）。我被困在需要获取每个图像的 Base64 编码内容的部分：我认为我做的不对。我应该在客户端使用 FileReader，还是在服务器端使用 Utilities.base64Encode 得到我想要的？任何想法表示赞赏！

Answer 1

我相信你的目标如下。

• 您想要检索文件并将其作为 base64 数据发送到 Google Apps 脚本。

我认为在这种情况下，您可以使用前面提到的 FileReader 检索文件。使用 FileReader 时，可以在 Javascript 端直接获取 base64 数据。所以当你的脚本被修改后，就变成了如下。

修改后的脚本：

HTML&Javascript 端：

从：

function handleFormSubmit(formObject) {
    google.script.run.processForm(formObject);
}

到：

function handleFormSubmit(formObject) {
  Promise.all([...formObject.images_input.files].map((file, i) => {
    const fr = new FileReader();
    return new Promise((r) => {
      fr.onload = (f) => r({filename: file.name, base64Data: f.target.result.split(",")[1]});
      fr.readAsDataURL(file);
    });
  }))
  .then((obj) => {
    google.script.run.processForm(obj);
  });
}

Google Apps 脚本方面：

从：

function processForm(formObject) {
    var images = formObject.images_input;
    var base64Images = Utilities.base64Encode(images);

到：

function processForm(base64Images) {

• 在这种情况下，base64Images 是一个类似[{base64Data: "###base64ImageData1###", filename: "filename1"},{base64Data: "###base64ImageData2###", filename: "filename2"},,,] 的数组。

注意：

• 在此修改中，假设您已经能够使用您想要使用的 API。请注意这一点。

参考：

• FileReader