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
关联项目
FreeSql QQ群:4336577
BA & Blazor QQ群:795206915
Maui Blazor 中文社区 QQ群:645660665
知识共享许可协议
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名AlexChow(包含链接: https://github.com/densen2014 ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系 。
转载声明
本文来自博客园,作者:周创琳 AlexChow,转载请注明原文链接:https://www.cnblogs.com/densen2014/p/16052168.html
AlexChow
今日头条 | 博客园 | 知乎 | Gitee | GitHub
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 易语言 —— 开山篇