Javascript 谷歌表单文件上传-如何使用表单提交的图像并将其嵌入电子邮件_Javascript_Google Apps Script_Google Sheets_Gmail_Google Forms

Javascript 谷歌表单文件上传-如何使用表单提交的图像并将其嵌入电子邮件

javascript google-apps-script google-sheets gmail

Javascript 谷歌表单文件上传-如何使用表单提交的图像并将其嵌入电子邮件,javascript,google-apps-script,google-sheets,gmail,google-forms,Javascript,Google Apps Script,Google Sheets,Gmail,Google Forms,我有点被困在一个项目上，需要一些帮助目标：我正试图提交一个谷歌表单，里面有各种各样的数据和图像。然后使用表单数据触发HTML电子邮件并嵌入图像到目前为止，我可以做任何事情，除了嵌入图像这是我到目前为止所拥有的代码.gs function getData() { var sh = SpreadsheetApp.getActive() .getSheetByName('Form responses 1'); return sh.getRange(sh.

我有点被困在一个项目上，需要一些帮助

目标：我正试图提交一个谷歌表单，里面有各种各样的数据和图像。然后使用表单数据触发HTML电子邮件并嵌入图像

到目前为止，我可以做任何事情，除了嵌入图像

这是我到目前为止所拥有的

代码.gs

      function getData() {
   var sh = SpreadsheetApp.getActive()
       .getSheetByName('Form responses 1');
   return sh.getRange(sh.getLastRow(), 1, 1, sh.getLastColumn())
       .getValues()[0]

}





function testEmail() {
   var htmlBody = HtmlService
       .createTemplateFromFile('mail_template')
       .evaluate()
       .getContent();
var mailADdy = "myemail@email.co.uk";
   MailApp.sendEmail({
       to:mailADdy,
       subject: 'Test Email markup - ' + new Date(),
       htmlBody: htmlBody,
   });

  }

mail_template.html

    <!DOCTYPE html>
<html>
  <head>
    <style>
      @media only screen and (max-device-width: 480px) {
        /* mobile-specific CSS styles go here */
      }
    </style>
  </head>
  <body>
   <? var data = getData(); ?>
   <? var first = data[2]; ?>
   <? var second = data[3]; ?>
       <? var third = data[4]; ?>
       <? var fourth = data[5]; ?>

  /* imageUpload var is the link to the image that's been uploaded, in "https://drive.google.com/open?id=ID" format"*/
       <? var imageUpload = data[6]; ?>

   /* Below are some things that I've tried and failed */
   <? var imageID = imageUpload.replace("https://drive.google.com/open?id=","");?>
  <? var imageBlob = UrlFetchApp.fetch(imageUpload).getBlob().setName("imageBlob");?>
   <? var imageBlob = DriveApp.getFileById(imageID).getBlob();?>





    <div class="main">
      <p style="text-align: center;"><strong>This is a test HTML email.</strong></p>
      <table style="margin-left: auto; margin-right: auto;">
        <tbody>
          <tr>
            <td style="text-align: left;">First question to be put here</td>
            <td style="text-align: right;"><strong><?= first ?></strong> </td>
          </tr>
          <tr>
            <td style="text-align: left;">Second question here</td>
            <td style="text-align: right;"><?= second ?></td>
          </tr>
          <tr>
            <td style="text-align: left;">Third question here</td>
            <td style="text-align: right;"><?= third ?></td>
          </tr>
          <tr>
            <td style="text-align: left;">Image Upload test</td>
            <td style="text-align: right;"><?= imageUpload ?></td>
          </tr>
        </tbody>
      </table>
      <p></p>
      <p style="text-align: center;"><img src="https://imageurl.com" alt="Logo" /></p>
    </div>
  </body>
</html>


@仅介质屏幕和（最大设备宽度：480px）{
/*特定于手机的CSS样式在这里*/
}
/*imageUpload var是指向已上载图像的链接，位于“https://drive.google.com/open?id=ID“格式”*/
/*下面是一些我尝试过但失败的事情*/
这是一封测试HTML电子邮件。
第一个问题放在这里

第二个问题
第三个问题
图像上传测试

getData函数返回我的工作表中的最后一行数据（这将是最近提交的表单） testEmail发送电子邮件

邮件模板包含电子邮件布局等的HTML

通过使用scriplets，我可以将表单值输入电子邮件并发送

然而，无论我如何尝试这个图像，我都无法正确地获得它

当我尝试在HTML文件中使用以下scriptlet时

 <? var imageBlob = UrlFetchApp.fetch(imageUpload).getBlob().setName("imageBlob");?>

我得到以下错误

执行失败：您没有调用fetch的权限

我也试过：

<? var imageBlob = DriveApp.getFileById(imageID).getBlob();?>

但仍然不起作用

我尝试过从这个链接中获取信息，

但无法将此转换为我的示例，因为它们没有使用单独的HTML文件

感谢您提供任何帮助/指针。

首先，您遇到的错误是因为您从未授予GAS访问UrlFetch或DriveApp的权限。这似乎违反直觉，但如果您只查看GAS脚本，您将注意到您从未在GAS端调用这些函数。因此，当您运行GAS脚本时，编译器从未调用这些函数看到对UrlFetch或DriveApp的调用。因此，不会请求您的权限来运行它。但是，在运行时，evaluate方法尝试访问这些方法，但授权失败。

这可以通过在气体侧使用一个虚拟函数来调用这个函数来解决

function dummyFunction(){
 DriveApp.getRootFolder()
 UrlFetchApp.fetch("www.google.com")
}

您不需要运行这些函数，但在编译过程中，它会要求对这些方法进行授权。因此，当您运行evaluate方法时，授权不会有问题

其次，要引入所描述的内联图像，您不必在HTML端获取imageBlob。您需要获取一个GAS脚本。您只需在HTML页面上包含一个img标记，如下所示

<tr>
    <td style="text-align: left;">Image</td>
    <td style="text-align: right;"><img src ="cid:imageKey"/></td>
</tr>

如果您使用这种技术，您不必在html页面上调用urlFetch或DriveApp，您可以删除这些脚本行。

谢谢@Jack，这是一种享受。非常有用：）

function testEmail() {
   var htmlBody = HtmlService
       .createTemplateFromFile('mail_template')
       .evaluate()
       .getContent();
        var mailADdy = "myemail@email.co.uk";
        var data = getData()
        var imageUpload = data[6]; 
        var imageID = imageUpload.replace("https://drive.google.com/open?id=","")
        // Use one of the below method to get the imageBloB
        var imageBlob = UrlFetchApp.fetch(imageUpload).getBlob().setName("imageBlob")
       //var imageBlob = DriveApp.getFileById(imageID).getBlob()

   MailApp.sendEmail({
       to:mailADdy,
       subject: 'Test Email markup - ' + new Date(),
       htmlBody: htmlBody,
       inlineImages:
       {
         imageKey: imageBlob,
       }
   });

  }