ReactJS中使用Gmail API发送含纯文本、附件、HTML邮件的问题

你的邮件MIME结构在换行和边界处理上有一些细节问题，导致邮件客户端没法正确识别纯文本部分。咱们一步步把它修复好：

核心问题分析 #

1. MIME边界的换行规范：MIME协议要求边界前后必须有标准的\r\n换行，尤其是边界开头的--与内容之间，还有各部分头信息和内容之间必须用\r\n\r\n（空行）分隔，少了就会导致解析混乱。
2. 附件拼接的边界缺失：之前的附件部分直接接在multipart/alternative的闭合边界后，没有加上multipart/mixed的边界前缀，导致附件和前面的文本部分没有被正确分隔开。
3. 部分换行符遗漏：纯文本内容的结尾和边界之间的换行不足，让客户端误以为纯文本是其他部分的附属内容。

修正后的代码 #

// 处理附件部分
let attachments = '';
for (let i = 0; i < email.attachment.length; i++) {
  const content = email.attachment[i].data.split(',')[1];
  // 每个附件前必须加上multipart/mixed的边界前缀
  const attachment = [
    '--012boundary01\r\n',
    'Content-Type: ' + email.attachment[i].type + '\r\n',
    'MIME-Version: 1.0\r\n',
    'Content-Transfer-Encoding: base64\r\n',
    'Content-Disposition: attachment; filename="' + email.attachment[i].name + '"\r\n\r\n', // 文件名加引号避免特殊字符问题
    content + '\r\n' // 附件内容后加换行保证格式规范
  ].join('');
  attachments += attachment;
}

// 构建完整的MIME邮件内容
let mail = [
  'Content-Type: multipart/mixed; boundary="012boundary01"\r\n',
  'MIME-Version: 1.0\r\n',
  'To: ' + email.to + '\r\n',
  'Subject: ' + email.subject + '\r\n\r\n', // 邮件头结束后必须留空行
  '--012boundary01\r\n',
  'Content-Type: multipart/alternative; boundary="012boundary02"\r\n\r\n', // 内部alternative边界加引号，结尾留空行
  '--012boundary02\r\n',
  'Content-Type: text/plain; charset=UTF-8\r\n\r\n', // 头信息后留空行分隔内容
  email.body + '\r\n', // 纯文本内容结尾加换行
  '--012boundary02\r\n',
  'Content-Type: text/html; charset=UTF-8\r\n',
  'Content-Transfer-Encoding: quoted-printable\r\n\r\n', // HTML头后留空行
  '<h1>HELLO</h1>\r\n',
  '--012boundary02--\r\n\r\n', // 闭合alternative边界后留空行，分隔后续附件
  attachments,
  '--012boundary01--' // 最终闭合mixed边界
].join('');

关键修改点说明 #

• 文件名加双引号：给filename值加上双引号，避免文件名包含空格或特殊字符时出现解析错误。
• 严格的换行分隔：确保每个MIME部分的头信息和内容之间用\r\n\r\n分隔，边界前后的\r\n不能省略。
• 附件的边界前缀：每个附件都要以--012boundary01\r\n开头，明确它属于multipart/mixed的子部分。
• 边界引号一致性：所有边界定义都加上双引号，和Content-Type里的边界值保持一致，避免解析歧义。

调整之后，邮件客户端就能正确识别纯文本、HTML和附件三个部分了。

内容的提问来源于stack exchange，提问作者Ang Yang Cheng