回答編集履歴
2
追記その２
test
CHANGED
|
@@ -61,3 +61,17 @@
|
|
|
61
61
|
|
|
62
62
|
|
|
63
63
|
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
**【追記２】**
|
|
67
|
+
|
|
68
|
+
ファイルのダウンロードについては以下の記事が参考になると思いますので、興味があれば読んでください。
|
|
69
|
+
|
|
70
|
+
ASP.NET Core MVC でファイルダウンロード
|
|
71
|
+
http://surferonwww.info/BlogEngine/post/2020/01/20/aspnet-core-mvc-file-download.aspx
|
|
72
|
+
|
|
73
|
+
上記は MVC の記事ですが、記事に書いてある "FileResult Class を継承する VirtualFileResult, FileContentResult, FileStreamResult, PhysicalFileResult オブジェクトのいずれかを Controller のアクションメソッドで生成して返してやることになります" の「Controller のアクションメソッド」を、Razor ページでは「.html.cs の OnGet メソッド」に読み替えてやれば Razor Pages でも書いてあることは有効です。
|
|
74
|
+
|
|
75
|
+
なお、上の記事の File メソッドの設定は、通知バーを表示するため File メソッドの第 3 引数にファイル名を設定して応答ヘッダに Content-Disposition が含まれるようにしていますが、今回の話のように img 要素に画像を表示するの場合は Content-Disposition は不要（というより、通知バーが表示され望む動きにならない）です。
|
|
76
|
+
|
|
77
|
+
上の【追記】コードでは第 2 引数までしか設定していないのはそれが理由です。
|
1
追記
test
CHANGED
|
@@ -4,3 +4,60 @@
|
|
|
4
4
|
http://surferonwww.info/BlogEngine/post/2021/11/24/upload-image-file-and-save-it-to-sql-server-in-aspnet-core-mvc.aspx
|
|
5
5
|
|
|
6
6
|
DB からファイルを取得してきて、そのバイト列をダウンロードする API を作って（上の記事では Controller の GetThumb メソッド）、その URL をhtml の img 要素の src 属性に設定する（上の記事では Index.cshtml 参照）ことで表示できます。
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
**【追記】**
|
|
11
|
+
|
|
12
|
+
下のコメント欄の私のコメントで「後で Razor Pages 用のサンプルを回答欄に追記しておきます」と書いた件です。
|
|
13
|
+
|
|
14
|
+
紹介した記事のプロジェクト（Razor Pages も使えるように設定してある）のルート直下に Pages フォルダを追加し、それに FetchThumbImage という名前の Razor ページを追加し、紹介した記事の GetThumb メソッドを移植したのが下記のコードです。
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
#nullable disable
|
|
18
|
+
|
|
19
|
+
using Microsoft.AspNetCore.Mvc;
|
|
20
|
+
using Microsoft.AspNetCore.Mvc.RazorPages;
|
|
21
|
+
using MvcCore6App.Data;
|
|
22
|
+
using MvcCore6App.Models;
|
|
23
|
+
using Microsoft.EntityFrameworkCore;
|
|
24
|
+
|
|
25
|
+
namespace MvcCore6App.Pages
|
|
26
|
+
{
|
|
27
|
+
public class FetchThumbImageModel : PageModel
|
|
28
|
+
{
|
|
29
|
+
private readonly FileContext _context;
|
|
30
|
+
|
|
31
|
+
public FetchThumbImageModel(FileContext context)
|
|
32
|
+
{
|
|
33
|
+
_context = context;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
public async Task<IActionResult> OnGetAsync(int? id)
|
|
37
|
+
{
|
|
38
|
+
if (id == null)
|
|
39
|
+
{
|
|
40
|
+
return NotFound();
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
FileEntity file = await _context.Files
|
|
44
|
+
.FirstOrDefaultAsync(m => m.Id == id);
|
|
45
|
+
|
|
46
|
+
if (file == null)
|
|
47
|
+
{
|
|
48
|
+
return NotFound();
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
return File(file.ThumbImage, "image/jpeg");
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
上記を使って画像を表示するには、例えば、以下のように img 要素の src 属性に上の URL とクエリ文字列を設定すれば、
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
以下の通り画像は表示されます。お試しください。
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|