从s3 bucket中获取对象，并在react js中显示为缩略图

Question

我正在从s3获取对象，现在我想在我的react应用程序中将它们显示为缩略图，那么我该如何实现呢？

var params = {
Bucket: BUCKET_NAME,
Prefix: 'media',
};
s3.listObjects(params, function (err, data) {
if (err) console.log(err, err.stack);
else {
console.log('objects list', data); // successful response
}
});

我收到了回复中的内容，但问题是如何在我的应用程序中显示它们？

注意：bucket是私有

Answer 1

我遇到了一个类似的问题，我必须显示API的缩略图，因为这个端点位于oAuth&我不能简单地给出图像资源的URL。我假设您也收到了一个八位字节流。

以下是我的axios调用：

images(id: string, cancelToken?: CancelToken): Promise<FileResponse> {
let url_ = "pathtoendpoint/{id}";
let options_ = <AxiosRequestConfig>{
cancelToken,
responseType: "blob",
method: "GET",
url: url_,
headers: {
Accept: "application/octet-stream",
Authorization: "Bearer ezfsdfksf...."
},
};

return Axios.create().request(options_).then((_response: AxiosResponse) => 
{ 
return new Promise<FileResponse>(_response.data);
});
} 
export interface FileResponse {
data: Blob;
status: number;
fileName?: string;
headers?: { [name: string]: any };
}

然后，我创建一个包含uri 的短暂DOM字符串

let uri = URL.createObjectURL(data)

一旦我有了uri，我就可以把它显示为

<img src={uri} id="someId" alt="" />

如果它能帮助我的服务器端代码，就像这样，

[Produces("application/octet-stream")]
public async Task<ActionResult> GetImageById([FromRoute] Guid id)
{
var resource = await DatalayerService.GetImageAsync(id);
return File(resource.Filebytes, resource.ContentType);
}