Blazor不得不說真是好東西，極大的提升了開發效率，很多的頁面交互功能基本上只需要寫很少的代碼就能實現了，而且還是無js實現，你也絕對沒有想到過，Blazor實現文件上傳是有多么簡單！

先說結論：Blazor實現帶進度顯示的文件上傳真的很簡單！效果看圖：

實現這么一個小功能，僅僅只花了不到50行的代碼就實現了，接下來就給大家分享下案例實現吧。

首先引入Tewr.Blazor.FileReader包，這個包能夠提供文件上傳的流式讀取，這樣便可以實現在服務端對上傳文件進行一邊上傳一遍寫文件的操作。

配置依賴注入(站長注：這是Blazor Server模式，wasm方式請查看文末倉庫文檔說明)：

services.AddFileReaderService();

接下來我們先進行頁面布局，很簡單，再聲明兩個變量用于顯示進度和顯示圖片：

<input?type="file"/><button>上傳文件</button> <div>@if?(!string.IsNullOrEmpty(_src)){<img?src="@_src"?width="600px"?/>}else{<p>@progress</p>} </div>

然后在組件中注入IFileReaderService服務

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

給按鈕綁定事件，按鈕觸發后通過fileReaderService進行文件流的讀取，接下來便是常規的二進制數據copy操作，可以拿到文件的傳輸進度，計算之后便能顯示到頁面中

<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服務端模式：

demo做的一般，可能gif看不出啥，只是為了證明這個包確實不錯，要實現大文件上傳，可把上面單包讀取大小改大一點，比如：512KB:

var?buffer?=?new?byte[1024*512];

如果看下方微軟Blazor文件上傳文檔，把單包大小改成大于20KB，頁面可能會卡一下，然后頁面自動刷新就把上傳操作給重置了，而使用這個包確沒這個問題，這個包很nice。

OK，本文完。

參考

• Blazor實現文件上傳帶進度顯示案例分享^[1]

• https://github.com/Tewr/BlazorFileReader^[2]

• https://docs.microsoft.com/zh-cn/aspnet/core/blazor/file-uploads?view=aspnetcore-6.0&pivots=server^[3]

參考資料

[1]

Blazor實現文件上傳帶進度顯示案例分享: https://masuit.com/1676

[2]

https://github.com/Tewr/BlazorFileReader: https://github.com/Tewr/BlazorFileReader

[3]

https://docs.microsoft.com/zh-cn/aspnet/core/blazor/file-uploads?view=aspnetcore-6.0&pivots=server: https://docs.microsoft.com/zh-cn/aspnet/core/blazor/file-uploads?view=aspnetcore-6.0&pivots=server

總結

以上是生活随笔為你收集整理的这是Blazor上传文件的最佳方式吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。