Blazor不得不說(shuō)真是好東西，極大的提升了開(kāi)發(fā)效率，很多的頁(yè)面交互功能基本上只需要寫很少的代碼就能實(shí)現(xiàn)了，而且還是無(wú)js實(shí)現(xiàn)，你也絕對(duì)沒(méi)有想到過(guò)，Blazor實(shí)現(xiàn)文件上傳是有多么簡(jiǎn)單！

先說(shuō)結(jié)論：Blazor實(shí)現(xiàn)帶進(jìn)度顯示的文件上傳真的很簡(jiǎn)單！效果看圖：

實(shí)現(xiàn)這么一個(gè)小功能，僅僅只花了不到50行的代碼就實(shí)現(xiàn)了，接下來(lái)就給大家分享下案例實(shí)現(xiàn)吧。

首先引入Tewr.Blazor.FileReader包，這個(gè)包能夠提供文件上傳的流式讀取，這樣便可以實(shí)現(xiàn)在服務(wù)端對(duì)上傳文件進(jìn)行一邊上傳一遍寫文件的操作。

配置依賴注入(站長(zhǎng)注：這是Blazor Server模式，wasm方式請(qǐng)查看文末倉(cāng)庫(kù)文檔說(shuō)明)：

services.AddFileReaderService();

接下來(lái)我們先進(jìn)行頁(yè)面布局，很簡(jiǎn)單，再聲明兩個(gè)變量用于顯示進(jìn)度和顯示圖片：

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

然后在組件中注入IFileReaderService服務(wù)

@using?Tewr.Blazor.FileReader @inject?IFileReaderService?fileReaderService;

為了讓文件框能夠和C#代碼進(jìn)行交互，所以需要將它通過(guò)ElementReference引用起來(lái):

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

給按鈕綁定事件，按鈕觸發(fā)后通過(guò)fileReaderService進(jìn)行文件流的讀取，接下來(lái)便是常規(guī)的二進(jìn)制數(shù)據(jù)copy操作，可以拿到文件的傳輸進(jìn)度，計(jì)算之后便能顯示到頁(yè)面中

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

站長(zhǎng)插播：

文章首圖演示的是一張不到1MB的圖片，因?yàn)門ewr.Blazor.FileReader這個(gè)包提供文件上傳的流式讀取，上傳大文件也是可以的，下面這是上傳一個(gè)34.2MB的ZIP壓縮包，Blazor服務(wù)端模式：

demo做的一般，可能gif看不出啥，只是為了證明這個(gè)包確實(shí)不錯(cuò)，要實(shí)現(xiàn)大文件上傳，可把上面單包讀取大小改大一點(diǎn)，比如：512KB:

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

如果看下方微軟Blazor文件上傳文檔，把單包大小改成大于20KB，頁(yè)面可能會(huì)卡一下，然后頁(yè)面自動(dòng)刷新就把上傳操作給重置了，而使用這個(gè)包確沒(méi)這個(gè)問(wèn)題，這個(gè)包很nice。

OK，本文完。

參考

• Blazor實(shí)現(xiàn)文件上傳帶進(jìn)度顯示案例分享^[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實(shí)現(xiàn)文件上傳帶進(jìn)度顯示案例分享: 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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。