html - 显示来自 s3 的图像

Question

我正在尝试显示我已上传到 S3 的图像。我相信权限是正确的，因为我可以点击 URL 并获取数据。然而，当我将 URL 放入图像标签时，我得到了一个损坏的链接。

当我将图像标签放在网站的网络选项卡中时，我看到对 s3 的调用(带有 200 响应)，但正文为空。如果我直接点击 s3 url，我会取回数据，并在网络选项卡中看到带有来自 s3 的响应正文的调用。

我正在将图像从 Vue 前端上传到 Express/Node 后端。我在 s3 中看到的图像很好。

s3.putObject({
    Bucket: 'MYBUCKET',
    Key: `${result._id}-${file.upload.filename}`,
    Body: file.dataURL,
    ACL: 'public-read',
    ContentType: 'binary',
    ContentEncoding: 'utf8'
}, function (resp) {});

fiddle :https://jsfiddle.net/Xadvz/7327/

我使用直接点击 s3 返回的数据，它显示图像，但当我输入 s3 url 时，它显示一个损坏的链接。

Answer 1

S3 不支持 dataURL 数据格式。

在您的后端:

1. 将 dataURL 转换为 缓冲区
2. 根据dataURL设置S3对象的ContentType

代码:

var regex = /^data:.+\/(.+);base64,(.*)$/;

var matches = file.dataURL.match(regex);
var ext = matches[1]; // image/jpeg
var data = matches[2]; // base64 string

var buffer = new Buffer(data, 'base64');

s3.putObject({
    Bucket: 'MYBUCKET',
    Key: `${result._id}-${file.upload.filename}`,
    Body: buffer, // upload binary
    ACL: 'public-read',
    ContentType: ext // set content type
}, function (resp) {});