从 s3 存储桶中获取对象并在反应 js 中显示为缩略图答案

【问题标题】：Get object from s3 bucket and display as thumbnail in react js从 s3 存储桶中获取对象并在反应 js 中显示为缩略图
【发布时间】：2022-01-14 16:48:07
【问题描述】：

我从 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
    }
});

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

注意：存储桶是私有的

【问题讨论】：

使用类组件还是函数组件？
函数组件，我认为组件是类或者函数应该不是问题
这些对象是否来自 s3 blob？
@SangeetAgarwal 我不明白你的意思吗？

标签： javascript reactjs amazon-s3 aws-sdk

【解决方案1】：

我有一个类似的问题，我必须显示来自返回 blob 的 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);
}

【讨论】：