使用AWS JavaScript SDK上传SVG至S3时ContentType错误的解决方法

我刚踩过一模一样的坑，给你指两个关键问题，改完就能解决：

问题1：你创建了Blob但没实际使用 #

你代码里生成了svgBlob，但上传时传给Body的是svgData（纯字符串）。S3会自动把纯文本字符串识别为text/plain类型，哪怕你指定了ContentType也可能被覆盖，用Blob能明确告诉S3这是个SVG文件。

问题2：ContentType参数名写错了 #

AWS JavaScript SDK的upload方法里，参数键名是首字母大写的ContentType，不是小写的contentType——这个大小写错误会导致你的设置被忽略，S3自动使用默认类型。

修正后的完整代码 #

var svgData = canvas.toSVG();
// 生成带正确类型的SVG Blob
var svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });

// 上传时用Blob作为Body，并且正确设置ContentType
s3.upload(
  {
    Key: svgkey,
    Body: svgBlob, // 这里换成svgBlob，不是svgData
    ContentType: 'image/svg+xml', // 注意首字母大写的C
    // 如果需要让文件可以公开访问，加上下面这行（可选）
    // ACL: 'public-read'
  },
  function(err, data) {
    if (err) {
      console.error('SVG上传失败:', err);
      return;
    }
    console.log('SVG上传成功，访问地址:', data.Location);
  }
);

额外验证小技巧 #

上传完成后，可以在S3控制台找到这个文件，查看它的“属性”面板，确认Content-Type是不是image/svg+xml。如果还是不对，检查一下：

• 有没有拼写错ContentType的大小写
• Blob的type是不是正确设置了
• 有没有其他代码覆盖了这个参数

内容的提问来源于stack exchange，提问作者장형준