使用JavaScript从AWS S3获取文件返回异常内容，求技术支持

你遇到的问题其实很常见——你用$.ajax请求的是图片文件，但jQuery默认会把响应当成文本格式来解析，而图片是二进制数据，所以控制台就输出了一堆乱码（就是你截图里的内容）。

为什么会这样？ #

getSignedUrl生成的URL本身是没问题的，它可以直接用来访问S3上的图片。但$.ajax默认的dataType是"智能猜测"，对于图片这种二进制资源，它没法正确解析，就把二进制字节转换成了文本字符，看起来就是乱码。

解决方法 #

根据你的需求，有两种常见的处理方式：

方式1：直接使用生成的URL展示图片

如果你的目的是在页面上显示图片，完全不需要用ajax请求，直接把生成的URL赋值给<img>标签的src属性就行：

AWS.config.update({ 
  accessKeyId: 'XXX', 
  secretAccessKey: 'XXX', 
  region: 'us-east-1' 
}); 
var s3 = new AWS.S3(); 
var s3Params = { 
  Bucket: "mybucket", 
  Key: "path/photo-515169.jpeg"
}; 
const url = s3.getSignedUrl('getObject', s3Params);
// 直接给img标签赋值
document.getElementById("your-img-id").src = url;

方式2：如果需要获取二进制数据（比如处理图片）

如果确实需要拿到图片的二进制数据进行后续处理，要修改$.ajax的配置，指定响应类型为二进制：

$.ajax({ 
  url: url,
  xhrFields: {
    responseType: 'blob' // 指定响应为Blob类型（二进制）
  },
  success: function(blob){ 
    // 这里拿到的是Blob对象，可以用来创建URL或者处理二进制数据
    const imgUrl = URL.createObjectURL(blob);
    console.log(imgUrl); // 可以用来显示图片
    // 或者做其他二进制处理
  } 
});

另外还要提醒一下：直接在前端硬编码accessKeyId和secretAccessKey是非常不安全的，建议改用AWS Cognito或者后端签名的方式来生成预签名URL，避免密钥泄露。

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