從 s3 存儲桶中獲取 object 並在反應 js 中顯示為縮略圖

Question

我從 s3 獲取對象，現在我想在我的反應應用程序中將它們顯示為縮略圖，那么我該如何實現呢？

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

我在響應中獲得了內容，但問題是如何在我的應用程序中顯示它們？

注意：存儲桶是私有的

Answer 1

我有一個類似的問題，我必須顯示來自 API 的縮略圖，因為這個端點在 oAuth 后面，所以我不能簡單地給出圖像資源的 ZE6B391A8D2C4D45902A23A8B6585703。 我假設您也收到了八位字節流。

這是我的 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);
}