通过API Gateway上传至S3的图片下载后无法正常打开该如何解决

问题原因 #

你遇到的文件体积翻倍、下载后无法打开的核心原因是API Gateway默认将二进制请求负载识别为UTF-8文本进行转码处理，原始图片的二进制结构被转码破坏，同时转码后的内容体积也会大幅上涨。你额外做的Base64编码操作会进一步增加文件体积，放大了这个问题。

修复步骤 #

• 第一步：配置API Gateway二进制媒体类型
  进入API Gateway控制台，打开对应API的「设置」页面，找到「二进制媒体类型」配置项，添加你需要支持的图片类型：image/jpeg、image/jpg，如果需要兼容其他二进制文件，也可以补充添加application/octet-stream。
• 第二步：调整S3集成请求配置
  打开对接S3的集成请求配置页，将「内容处理」选项设置为「透传二进制正文」（部分版本显示为「传递给集成端点的二进制正文，当请求Content-Type匹配二进制媒体类型时」），同时确保Content-Type请求头会被透传到S3，不要被API Gateway覆盖修改。
• 第三步：修正上传代码逻辑
  不需要将图片转成Base64格式后再上传，直接传递二进制文件流即可，正确的Node.js代码如下：

const https = require("https");
const fs = require("fs");

// 直接读取二进制文件，不需要转base64编码
const data = fs.readFileSync("filename.jpg");

const options = {
  hostname: "173ixxxxxxf.execute-api.eu-west-2.amazonaws.com",
  port: 443,
  path: "/Test/xxxx/filename.jpeg",
  method: "PUT",
  headers: {
    "Content-Type": "image/jpeg",
    "Content-Length": data.length,
  },
};

const req = https.request(options, (res) => {
  console.log(`statusCode: ${res.statusCode}`);
  res.on("data", (d) => {
    process.stdout.write(d);
  });
});

req.on("error", (error) => {
  console.error(error);
});

req.write(data);
req.end();

验证注意事项 #

所有配置修改完成后，必须将API重新部署到你正在使用的对应阶段（比如你当前使用的Test阶段），配置才会正式生效。部署完成后你原先使用的curl命令不需要做任何修改，即可正常上传文件，S3中存储的文件大小会和本地源文件一致，也可以正常打开预览。

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