通过网页上的 GMAIL api 发送带有附件的电子邮件

Question

我正在尝试使用 Gmail api 通过网页中的 js 发送一封带有附件的电子邮件。我成功登录并发送了一封没有附件的电子邮件，但是当我尝试添加附件时出现错误。错误是：

未捕获的类型错误：文件[i]未定义 加载 http://localhost:8000/:189 sendEmailWithAttachments http://localhost:8000/:182 调试器评估代码：1 无论如何，files[i] 不是未定义的，我可以从 console.log 中看到这一点。 files 属性来自 dom 上的输入文件元素。

我试过这个

function sendEmailWithAttachments(to, subject, body, files) {
var message = new Object();
message.to = to;
message.subject = subject;
message.body = body;
var boundary = 'foo_bar_baz';
var multipart = '';
for (var i = 0; i < files.length; i++) {
var reader = new FileReader();
console.log("il primo file è ",files[i].name)
reader.readAsDataURL(files[i]);
reader.onload = function () {
if(reader.result!=undefined){
var base64Data = reader.result.split(",")[1];
multipart += '--' + boundary + '\r\n' +
'Content-Type: application/octet-stream\r\n' +
'MIME-Version: 1.0\r\n' +
'Content-Transfer-Encoding: base64\r\n' +
'Content-Disposition: attachment; filename="' + files[i].name + '"\r\n\r\n' +
base64Data + '\r\n';} else{
console.log("reader.result contains: ",reader.result)
}
};
}
var request = gapi.client.gmail.users.messages.send({
'userId': 'me',
'resource': {
'raw': window.btoa(
"Content-Type: multipart/mixed; boundary=\"" + boundary + "\"\r\n" +
"MIME-Version: 1.0\r\n" +
"to: " + to + "\r\n" +
"subject: " + subject + "\r\n\r\n" +
"--" + boundary + "\r\n" +
"Content-Type: text/plain; charset=\"UTF-8\"\r\n" +
"MIME-Version: 1.0\r\n" +
"Content-Transfer-Encoding: 7bit\r\n\r\n" +
body + "\r\n\r\n" +
multipart +
"--" + boundary + "--"
)
}
});
request.execute(function(response) {
console.log(response);
});
}

Answer 1

FileReader 以异步进程运行。我担心您当前问题的原因可能是由于此原因。在你的展示脚本中，做如下修改怎么样？

修改后的脚本：

async function sendEmailWithAttachments(to, subject, body, files) {
  var message = new Object();
  message.to = to;
  message.subject = subject;
  message.body = body;
  var boundary = 'foo_bar_baz';
  var multipart = '';
  for (var i = 0; i < files.length; i++) {
    var reader = new FileReader();
    console.log("il primo file è ", files[i].name)
    reader.readAsDataURL(files[i]);
    await new Promise(resolve => {
      reader.onload = _ => resolve();
    });
    if (reader.result != undefined) {
      var base64Data = reader.result.split(",")[1];
      multipart += '--' + boundary + '\r\n' +
        'Content-Type: application/octet-stream\r\n' +
        'MIME-Version: 1.0\r\n' +
        'Content-Transfer-Encoding: base64\r\n' +
        'Content-Disposition: attachment; filename="' + files[i].name + '"\r\n\r\n' +
        base64Data + '\r\n';
    } else {
      console.log("reader.result contains: ", reader.result)
    }
  }
  var request = gapi.client.gmail.users.messages.send({
    'userId': 'me',
    'resource': {
      'raw': window.btoa(
        "Content-Type: multipart/mixed; boundary=\"" + boundary + "\"\r\n" +
        "MIME-Version: 1.0\r\n" +
        "to: " + to + "\r\n" +
        "subject: " + subject + "\r\n\r\n" +
        "--" + boundary + "\r\n" +
        "Content-Type: text/plain; charset=\"UTF-8\"\r\n" +
        "MIME-Version: 1.0\r\n" +
        "Content-Transfer-Encoding: 7bit\r\n\r\n" +
        body + "\r\n\r\n" +
        multipart +
        "--" + boundary + "--"
      )
    }
  });
  request.execute(function (response) {
    console.log(response);
  });
}

• 当

  gapi.client

  和

  to, subject, body, files

  的值为有效值时，我确认此修改后的脚本有效。

参考：

• 文件阅读器