👇
【C#】画像ファイルをS3からダウンロードするWebAPI
はじめに
.NETのWebAPIで画像ファイルをダウンロードして表示するのって、どうやって作るんだっけ?となりました。
簡単に検証したので、フロントエンド・バックエンド両方の実装を掲載します。
概要
S3から画像をダウンロードして表示します。
- フロントエンド
Next.jsで実装しています。axiosを使用してバックエンドAPIから画像ファイルをGETします。 - バックエンド
.NET6で実装しています。S3から画像ファイルをダウンロードし、フロントエンドへ返します。
フロントエンドの実装例
axiosを使用してバックエンドAPIから画像ファイルをダウンロードします。responseType
にarraybuffer
を指定しています。
ダウンロードした画像をimgタグに設定します。
index.tsx
import axios from "axios";
import type { NextPage } from "next";
import { useEffect, useRef } from "react";
const Home: NextPage = () => {
const imgRef = useRef<HTMLImageElement>(null);
const downloadImg = async () => {
// 画像ファイルをダウンロードする "arraybuffer"を指定する
const res = await axios.get("http://localhost:5217/MyDownload", {
params: {
key: "gazo.jpg",
},
responseType: "arraybuffer",
});
const contentType = res.headers["content-type"];
const blob = new Blob([res.data], { type: contentType });
const url = window.URL || window.webkitURL;
const img = imgRef.current;
if (img != null) {
// blobのURLを作成してimgタグに設定
img.src = url.createObjectURL(blob);
}
};
useEffect(() => {
downloadImg();
}, []);
return (
<>
<img ref={imgRef} />
</>
);
};
export default Home;
バックエンドの実装例
コントローラはFile
オブジェクトを返却します。File
オブジェクトにはResponseStream
とContentType
を設定しています。
S3へのアクセスはAWSSDKを使用しています。
MyUploadController.cs
using Amazon.S3;
using Amazon.S3.Model;
using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Mvc;
namespace MyUploadApi.Controllers
{
[ApiController]
[Route("[controller]")]
public class MyDownloadController : ControllerBase
{
public MyDownloadController(){}
[EnableCors("CorsPolicy")]
[HttpGet(Name = "MyDownload")]
public async Task<IActionResult> MyDownload([FromQuery] string key)
{
try
{
// S3から取得
var client = new AmazonS3Client();
var response = await client.GetObjectAsync(new GetObjectRequest
{
BucketName = "somebucketname",
Key = key,
});
return File(response.ResponseStream, response.Headers.ContentType);
}
catch (AmazonS3Exception)
{
// バケットやオブジェクトが存在しない
return NotFound();
}
catch (Exception)
{
// TODO: エラー原因をログに出すこと
throw;
}
}
}
}
まとめ
ファイルのダウンロードをするフロントエンド・バックエンドの実装でした。
どなたかの参考になれば幸いです。
ファイルをアップロードしてS3に保存するWebAPI
アップロードするAPIの作り方は下記にまとめています。
Discussion