google-apps-script - 如何在 Google Apps Script 中获取多个上传图片的 Base64 内容?
问题描述
我正在使用 Google Apps 脚本在 Google 表格中创建一个侧边栏表单,用户可以在其中上传至少一张图片。之后,我想获取每个图像的 Base64 编码内容和图像的文件名。然后,我将向 SendGrid 的 API 发出请求,以创建并发送一封电子邮件,其中附件是用户上传的图像。
这是我到目前为止的代码:
表单.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 得到我想要的?任何想法表示赞赏!
解决方案
我相信你的目标如下。
- 您想要检索文件并将其作为 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。请注意这一点。
参考:
推荐阅读
- bash - 打开一个新的 git-bash 终端并在其中运行命令
- security - 如何在 Contiki / Cooja 模拟器中启用 LLSEC?
- node.js - 来自 tsconfig.json 的路径在 tsc 之后不起作用
- powerbi - DirectQuery PowerBI 中的 DAX 公式兼容性 - 匹配来自另一个表的值
- excel - VBA,IF逻辑错误,如何退出
- typedoc - 如何自定义 TypeDoc 主题?
- authentication - 如何在 Dynamics Crm 项目中更改 WS-Trust 安全性
- c# - 带有 cookie 的音频流 - 登录后 (C# NAudio)
- android - 如何使用 XML 在 Android 中创建此设计?
- node.js - Node.js 在上传时获取视频时长