1. 前言
今天有小伙伴咨詢內網環境手機等移動設備怎樣快速跟主機交換文件,群友齊齊出力討論:es文件管理器開web服務,網盤中轉,QQ發文件,各種方案各抒己見,好不繁華.
突然想到前段時間Net6正式發布后,帶來了一個新的IBrowserFile接口, Blazor 文件上傳變得非常便利,小的應用場景直接拋棄傳統的Controller形式上傳文件,話不多說,直接開擼.
運行截圖
2. IBrowserFile接口
| 屬性 | 解釋 |
|---|---|
| ContentType | 獲取瀏覽器指定的文件的 MIME 類型。 |
| LastModified | 獲取瀏覽器指定的上次修改日期 |
| Name | 獲取瀏覽器指定的文件的名稱 |
| Size | 獲取瀏覽器指定的文件大小（以字節為單位） |
| 方法 | 解釋 |
|---|---|
| OpenReadStream(Int64, CancellationToken) | 打開用於讀取已上傳文件的流 |
| RequestImageFileAsync(IBrowserFile, String, Int32, Int32) | 嘗試將當前圖像文件轉換為指定文件類型和最大文件維度的新文件之一 |
3. 使用 InputFile 組件將瀏覽器文件數據讀入
使用 InputFile 組件將瀏覽器文件數據讀入 .NET 代碼。 InputFile 組件呈現 file 類型的 HTML < input > 元素。 默認情況下，用戶選擇單個文件。 可添加 multiple 屬性以允許用戶一次上傳多個文件。
發生 OnChange (change) 事件時，以下 InputFile 組件執行 LoadFiles 方法。 InputFileChangeEventArgs 提供對所選文件列表和每個文件的詳細信息的訪問：
<InputFile OnChange="@LoadFiles" multiple />
@code {
private void LoadFiles(InputFileChangeEventArgs e)
{
...
}
}
若要從用戶選擇的文件中讀取數據，請對該文件調用 IBrowserFile.OpenReadStream，並從返回的流中讀取。OpenReadStream 強制采用其 Stream 的最大大小（以字節為單位）。 讀取一個或多個大於 512,000 字節 (500 KB) 的文件會引發異常。 此限制可防止開發人員意外地將大型文件讀入到內存中。 如果需要，可以使用 OpenReadStream 上的 maxAllowedSize 參數指定更大的大小。
使用以下方法，因為文件的 是直接提供給使用者的，FileStream 會在提供的路徑中創建文件：
await using FileStream fs = new(path, FileMode.Create);
await browserFile.OpenReadStream().CopyToAsync(fs);
3. 新建BlazorServer工程命名為BlazorFileUpload,也可以cmd來一通
mkdir BlazorFileUpload
cd BlazorFileUpload
dotnet new blazorserver
4. Pages/Index.razor
加入兩個上傳按鈕組件
<div>
上傳文件
<InputFile OnChange="OnChange" class="form-control" multiple />
</div>
<div style="padding-top:20px">
上傳圖片
<InputFile OnChange="OnChange" class="form-control" multiple accept='image/*' />
</div>
加入瀏覽目錄按鈕以及顯示上傳進度代碼塊
<div style="padding-top:30px">
<a class="btn btn-primary" href="Upload">
<span class="oi oi-file" aria-hidden="true"></span> 瀏覽文件
</a>
</div>
<pre>
<code>
@uploadstatus
</code>
</pre>
編寫cs代碼
@code{
[Inject] protected Microsoft.AspNetCore.Hosting.IWebHostEnvironment? HostEnvironment { get; set; } //獲取IWebHostEnvironment
protected string UploadPath = "";
protected string? uploadstatus;
long maxFileSize = 1024 * 1024 * 15;
protected override void OnAfterRender(bool firstRender)
{
if (!firstRender) return;
UploadPath = Path.Combine(HostEnvironment!.WebRootPath, "Upload"); //初始化上傳路徑
if (!Directory.Exists(UploadPath)) Directory.CreateDirectory(UploadPath); //不存在則新建目錄
}
protected async Task OnChange(InputFileChangeEventArgs e)
{
int i = 0;
var selectedFiles = e.GetMultipleFiles(100);
foreach (var item in selectedFiles)
{
i++;
await OnSubmit(item);
uploadstatus += Environment.NewLine + $"[{i}]: " + item.Name;
}
}
protected async Task OnSubmit(IBrowserFile efile)
{
if (efile == null) return;
var tempfilename = Path.Combine(UploadPath, efile.Name);
await using FileStream fs = new(tempfilename, FileMode.Create);
using var stream = efile.OpenReadStream(maxFileSize);
await stream.CopyToAsync(fs);
StateHasChanged();
}
}
現在運行一下看看效果
可以看到,第一個按鈕可以多選文件,並直接成功上傳到了工程的wwwroot/Upload目錄,不限制格式.
第二個按鈕也可以多選文件,但是限制為image/*圖片格式.
上傳功能完成.
點擊 瀏覽文件 按鈕,顯示 Sorry, there's nothing at this address. 翻車了......
Blazor組件自做九: 用20行代碼實現文件上傳,瀏覽目錄功能 (2)
Blazor組件自做九: 用20行代碼實現文件上傳,瀏覽目錄功能 (3)