如何解决如何在Google Apps脚本中获取多个上传图像的Base64内容? HTML&Javascript方面: Google Apps脚本方面:
我正在使用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>
Code.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。请注意这一点。
参考:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。