Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (1)

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)

---

AlexChow

今日头条 | 博客园 | 知乎 | Gitee | GitHub