javascript - 如何在 HTML 中显示来自 Gmail API 的内联图像和附件——拼图的最后一部分

Question

我的前端有一个“消息”对象，来自 Gmail API 的响应，并调整了这个非常有用的 Javascript 要点，我也解析了消息。

function indexHeaders(headers) {
        if (!headers) {
          return {};
        } else {
          return headers.reduce(function (result, header) {
            result[header.name.toLowerCase()] = header.value;
            return result;
          }, {});
        }
      }


function urlB64Decode(string) {
  encodedBody = string 
  encodedBody = encodedBody.replace(/-/g, '+').replace(/_/g, '/').replace(/\s/g, '');
  return decodeURIComponent(escape(window.atob(encodedBody)));
}


function parseMessage(response) {
  var result = {
    id: response.id,
    threadId: response.threadId,
    labelIds: response.labelIds,
    snippet: response.snippet,
    historyId: response.historyId
  };
  if (response.internalDate) {
    result.internalDate = parseInt(response.internalDate);
  }

  var payload = response.payload;
  if (!payload) {
    return result;
  }

  var headers = indexHeaders(payload.headers);
  result.headers = headers;

  var parts = [payload];
  var firstPartProcessed = false;

  while (parts.length !== 0) {
    var part = parts.shift();
    if (part.parts) {
      parts = parts.concat(part.parts);
    }
    if (firstPartProcessed) {
      headers = indexHeaders(part.headers);
    }

    if (!part.body) {
      continue;
    }

    var isHtml = part.mimeType && part.mimeType.indexOf('text/html') !== -1;
    var isPlain = part.mimeType && part.mimeType.indexOf('text/plain') !== -1;
    var isAttachment = headers['content-disposition'] && headers['content-disposition'].indexOf('attachment') !== -1;
    var isInline = headers['content-disposition'] && headers['content-disposition'].indexOf('inline') !== -1;

    if (isHtml && !isAttachment) {
      result.textHtml = urlB64Decode(part.body.data);
    } else if (isPlain && !isAttachment) {
      result.textPlain = urlB64Decode(part.body.data);
    } else if (isAttachment) {
      var body = part.body;
      if(!result.attachments) {
        result.attachments = [];
      }
      result.attachments.push({
        filename: part.filename,
        mimeType: part.mimeType,
        size: body.size,
        attachmentId: body.attachmentId,
        headers: indexHeaders(part.headers)
      });
    } else if (isInline) {
    var body = part.body;
    if(!result.inline) {
      result.inline = [];
    }
    result.inline.push({
      filename: part.filename,
      mimeType: part.mimeType,
      size: body.size,
      attachmentId: body.attachmentId,
      headers: indexHeaders(part.headers)
    });
  }

    firstPartProcessed = true;
  }

  return result;
};

因此，在解析响应之后，它现在是这种格式：

{ 
  //   id: '{MESSAGE_ID}',
  //   threadId: '{THREAD_ID}',
  //   labelIds: [ 'SENT', 'INBOX', 'UNREAD' ],
  //   snippet: 'This is one cool message, buddy.',
  //   historyId: '701725',
  //   internalDate: 1451995756000,
  //   attachments: [{ 
  //     filename: 'example.jpg',
  //     mimeType: 'image/jpeg',
  //     size: 100446,
  //     attachmentId: '{ATTACHMENT_ID}',
  //     headers: {
  //       'content-type': 'image/jpeg; name="example.jpg"',
  //       'content-description': 'example.jpg',
  //       'content-transfer-encoding': 'base64',
  //       'content-id': '...',
  //       ...
  //     }
  //   }],
  //   inline: [{ 
  //     filename: 'example.png',
  //     mimeType: 'image/png',
  //     size: 5551,
  //     attachmentId: '{ATTACHMENT_ID}',
  //     headers: {
  //       'content-type': 'image/jpeg; name="example.png"',
  //       'content-description': 'example.png',
  //       'content-transfer-encoding': 'base64',
  //       'content-id': '...',
  //       ...
  //     }
  //   }],
  //   headers: {
  //     subject: 'Example subject',
  //     from: 'Example Name <[e-mail]>',
  //     to: '<[e-mail]>, Foo Bar <[e-mail]>',
  //     ...
  //   },
  //   textPlain: '<div dir="ltr">hey! <div><br></div><div><div><img src="cid:ii_k0l2i10d0" alt="Image_Name 2019-09-11 at 20.47.16.jpeg" width="452" height="339"><br></div></div></div>',
  //   textHtml: '<div dir="ltr">hey! <div><br></div><div><div><img src="cid:ii_k0l2i10d0" alt="Image_Name 2019-09-11 at 20.47.16.jpeg" width="452" height="339"><br></div></div></div>'
  // }

不过，我很难在 html 中呈现实际的内联图像/附件。如果我使用 中的“textHtml” parsedMessage，它会呈现为<img src='cid:ii_k0l2i10d0'>html 中的内容，不显示图像。

这个 Stackoverflow 答案很有帮助，但我需要最后一部分的帮助。我有attachmentID现在。它说“从 Gmail API 获取附件并用 base64 数据替换 cid”，这是我正在努力解决的部分。我怎么做？-- 我是否必须为此再次调用 Gmail API？还是我在解码的某个地方出错了？

非常感谢您的帮助！

标签： javascriptjquerygmail-api

Answer 1

我终于让它工作了——所以答案是，是的，我确实必须再次调用 API来获取附件数据。这将返回一个附件资源，如下所示：

{
  "attachmentId": string,
  "size": integer,
  "data": bytes
}

一旦我得到回应：

// construct the new src with the data from the response 
newSrc = "data:" + "image/jpeg" + ";" + "base64" + "," + response.data.replace(/-/g, `+`).replace(/_/g, `/`)
// replace the src of the image with the new src 
thisImg.attr({"src":newSrc});