Blazorは本当に良いことで、開発効率を大幅に向上させ、多くのページインタラクション機能は基本的に実装するためにほとんどコードを書く必要がありません。また、JS実装はありません。Blazorはファイルアップロードを実現するのがどれほど簡単かとは思いません。
結論：Blazorは進行状況表示付きのファイルアップロードを実装するのは本当に簡単です!効果を見る：
このような小さな機能を実装するには、50 行未満のコードで実装されています。次に、実装例を共有します。
首先引入Tewr.Blazor.FileReader包，这个包能够提供文件上传的流式读取，这样便可以实现在服务端对上传文件进行一边上传一遍写文件的操作。
依存注入の構成ウェブマスター注これはBlazor Serverモードです。wasmモードは、最後のリポジトリの説明を参照してください
services.AddFileReaderService();
次に、ページレイアウトを始め、進行状況と画像を表示する2つの変数を宣言します。
<input type="file" /><button>上传文件</button>
<div>
@if (!string.IsNullOrEmpty(_src)) {
<img src="@_src" width="600px" />
} else {
<p>@progress</p>
}
</div>
IFileReader Serviceサービスをコンポーネントに注入します。
@using Tewr.Blazor.FileReader @inject IFileReaderService fileReaderService;
ファイルボックスがC#コードと対話できるようにするには、ElementReferenceを介して参照する必要があります。
<input @ref="inputTypeFileElement" type="file" /><button>上传文件</button>
<div>
@if (!string.IsNullOrEmpty(_src)) {
<img src="@_src" width="600px" />
} else {
<p>@progress</p>
}
</div>
@code { private ElementReference inputTypeFileElement; private string _src;
private string progress; }
ボタンバインドイベント、ファイルストリーム読み取りのためにfileReader Serviceを介してボタントリガーされた後、通常のバイナリデータコピー操作が続き、ファイル転送の進捗状況を取得することができ、計算後にページに表示することができます。
<button @onclick="ReadFile">上传文件</button>
public async Task ReadFile()
{
_src = "";
foreach (var file in await fileReaderService.CreateReference(inputTypeFileElement).EnumerateFilesAsync())
{
await using var fileStream = await file.OpenReadAsync();
var buffer = new byte[2048];
var finalBuffer = new byte[fileStream.Length];
int count;
int totalCount = 0;
while ((count = await fileStream.ReadAsync(buffer, 0, buffer.Length)) != 0)
{
Buffer.BlockCopy(buffer, 0, finalBuffer, totalCount, count);
totalCount += count;
progress = "文件上传中 " + (int)(totalCount * 100.0 / fileStream.Length) + "%";
StateHasChanged();
}
_src = $"data:image/jpg;base64,{Convert.ToBase64String(finalBuffer)}";
progress = "";
StateHasChanged();
}
}
完全なコードは以下の通り。
@page "/counter" @using Tewr.Blazor.FileReader @inject IFileReaderService
fileReaderService;
<input @ref="inputTypeFileElement" type="file" />
<button @onclick="ReadFile">上传文件</button>
<div>
@if (!string.IsNullOrEmpty(_src)) {
<img src="@_src" width="600px" />
} else {
<p>@progress</p>
}
</div>
@code { private ElementReference inputTypeFileElement; private string _src;
private string progress; public async Task ReadFile() { _src = ""; foreach (var
file in await
fileReaderService.CreateReference(inputTypeFileElement).EnumerateFilesAsync()) {
await using var fileStream = await file.OpenReadAsync(); var buffer = new
byte[2048]; var finalBuffer = new byte[fileStream.Length]; int count; int
totalCount = 0; while ((count = await fileStream.ReadAsync(buffer, 0,
buffer.Length)) != 0) { Buffer.BlockCopy(buffer, 0, finalBuffer, totalCount,
count); totalCount += count; progress = "文件上传中 " + (int)(totalCount * 100.0
/ fileStream.Length) + "%"; StateHasChanged(); } _src =
$"data:image/jpg;base64,{Convert.ToBase64String(finalBuffer)}"; progress = "";
StateHasChanged(); } } }
** 駅長：**
文章首图演示的是一张不到1MB的图片，因为Tewr.Blazor.FileReader这个包提供文件上传的流式读取，上传大文件也是可以的，下面这是上传一个34.2MB的 ZIP 压缩包，Blazor 服务端模式：
デモは一般的に、GIFは何も見えないかもしれませんが、パッケージが本当に良いことを証明するために、大きなファイルアップロードを達成するために、上記の単一パッケージの読み取りサイズを少し大きくすることができます。
var buffer = new byte[1024*512];
下のMicrosoft Blazorファイルを見てドキュメントをアップロードし、単一のパッケージサイズを20KB以上に変更すると、ページがカードをクリックすることがあり、ページが自動的に更新されてアップロード操作がリセットされ、このパッケージを使用すると、このパッケージは本当に問題がなく、このパッケージは非常に良いです。
OK、本文終了。