React经AWS API Gateway传图片至Lambda为何需Base64解码？求正确方案

实现背景 #

我已经成功实现从React通过AWS API Gateway向AWS Lambda发送图片，并在同一Lambda函数中将图片上传至S3存储桶。

React前端代码 #

// 初始化APP状态
const [selectedImage, setSelectedImage] = useState();

// 文件输入组件
<input
  accept="image/jpg, image/jpeg, image/png"
  type="file"
  onChange={imageChange}
/>
...
// 文件选择变化时触发的函数
const imageChange = (e) => {
    if (e.target.files && e.target.files.length > 0) {
      setSelectedImage(e.target.files[0]);
    }
};
...
// 用户点击确认按钮时触发的提交函数
async function submitToBackend() {
    // 这里选择的是jpg图片
    setSelectedImage(e.target.files[0]);
   
    const backendResponse = await fetch(awsapigatewayurl, {
      method: "PUT",
      headers: {
        "Content-Type": "image/*",
      },
      body: selectedImage,
    })
    console.log(backendResponse)
}

API Gateway配置 #

我已完成以下配置：

• 启用Lambda代理集成
• 开启二进制图片格式支持，配置了对应图片媒体类型

Python Lambda后端代码 #

def lambda_handler(event, context):
    key = 'test.jpg'    
    data = event['body']
    decoded_data = base64.b64decode(data)
    image_filelike = io.BytesIO(decoded_data)

    # 创建日期文件夹（已存在则忽略）
    current_date = str(datetime.date.today())
    s3_client.put_object(Bucket=BUCKET, Key=(current_date + '/'))

    # 上传图片到S3
    s3_client.upload_fileobj(Bucket=BUCKET, 
                            Key='%s/%s' % (current_date, key), 
                            Fileobj=image_filelike)

遇到的问题 #

我发现必须执行decoded_data = base64.b64decode(data)才能正确处理图片数据。原本我以为应该由前端自行对二进制图片做Base64编码，但实际看起来API Gateway或链路中的某个环节已经自动完成了编码。

我用curl直接发送二进制数据测试，也能正常运行：

curl --location --request PUT "apigatewayurl" \
--header "Content-Type: image/jpeg" \
--data-binary "@/Users/user/Documents/IMG_7138.jpg"

疑问 #

请问我的操作是否存在错误？有没有更优的实现方式？

内容的提问来源于stack exchange，提问作者imraan1901