解决 ChatJS 发送附件时 400 错误：从 React Native 应用程序发送附件至 AWS Connect

2024-03-11 00:58:33

利用 ChatJS 库从 React Native 应用程序将附件发送至 AWS Connect

引言

在使用 Amazon Connect 的 ChatJS 库与客户服务代表交流时，附件的发送对于提供额外的上下文和支持至关重要。然而，试图通过 ChatJS 的 sendAttachment() 方法发送附件时，却遇到了烦人的 400 "无效请求正文" 错误。本指南将探讨导致此错误的原因，并提供一个循序渐进的解决方案，帮助开发者克服这一挑战。

问题根源

ChatJS 的 sendAttachment() 方法要求附件对象包含 contentType 和 content 字段。对于图像和其他二进制文件，content 字段需要一个 File 对象。从 React Native 应用程序中选择图像后，必须将其转换为 File 对象才能发送。

解决方案

解决此错误涉及将图像转换为 Blob 对象，然后再将其转换为 File 对象。以下是具体步骤：

将图像转换为 Blob 对象：

const imageUri = 'file:///path/to/image.jpg';
const fileBlob = new Blob([imageUri], { type: 'image/jpeg' });

将 Blob 对象转换为 File 对象：

const file = new File([fileBlob], 'image.jpg');

使用 sendAttachment() 方法发送附件：

const session = AmazonConnect.getSession();
const attachment = {
  contentType: 'application/octet-stream',
  content: file,
};
session.sendAttachment(attachment);

其他注意事项

确保图像文件的 MIME 类型正确（例如，对于 JPEG，应为 image/jpeg）。
如果使用文本文件作为附件，则可以将 contentType 设置为 text/plain。
请记住，sendAttachment() 方法是异步的，因此建议处理发送成功的响应并相应地更新 UI。

代码示例

import { ChatJS, Blob, File } from '@amazon-connect/amazon-connect-chatjs';

const handleSendAttachment = (file: File, clearAttachment: () => void) => {
  const session = ChatJS.getSession();
  const attachment = {
    contentType: 'image/jpeg',
    content: file,
  };

  session.sendAttachment(attachment).then(() => {
    clearAttachment();
    console.log('Attachment sent successfully');
  }).catch(err => {
    console.error('Error sending attachment: ', err);
  });
};

常见问题解答

为什么将图像转换为 Blob 对象？

Blob 对象是图像数据的原始表示形式，可以在 JavaScript 中创建和处理。在将其转换为 File 对象之前，需要此中间步骤。
是否可以发送多张图像作为附件？

ChatJS 允许一次发送多张图像作为附件。只需为每个图像创建单独的附件对象，然后将其传递给 sendAttachment() 方法。
如何处理发送失败？

sendAttachment() 方法返回一个 Promise，可以在 then() 或 catch() 块中处理发送结果。捕获错误以进行适当的错误处理和 UI 更新。
附件的大小限制是多少？

AWS Connect 对附件大小没有明确的限制，但这会因使用的情况而异。建议向 AWS 支持团队咨询特定的限制信息。
是否可以发送其他类型的文件作为附件？

是的，ChatJS 允许发送各种文件类型，包括文本、PDF 和视频。只需根据需要调整 contentType 字段。