这是Blazor上传文件的最佳方式吗?
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上传文件的最佳方式吗?相关推荐
- jquery ajax java上传文件_jQuery Ajax方式上传文件的方法
jQuery Ajax方式上传文件用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这 ...
- HTML上传文件的多种方式
1. 传统方式 <form id="upload-form" action="upload.php" method="post" en ...
- php上传文件失败解决方式
在apache配置文件中设置php上传临时目录 在服务器上配置webmail(比如我最喜欢的SquirrelMail)时,出于服务器安全考虑,一般在apache配置文件中作 php_admin_val ...
- ASP.Net Core创建MVC项目上传文件(缓冲方式)
学习了普通webapp中上传文件,再看看从MVC项目中通过缓冲方式上传文件到物理文件夹.这两者的区别主要是webapp通过模型绑定的方式传递IFormFile对象,而mvc通过控制器和action ...
- .Net框架集WebClient类向WinCE平台上传文件(FTP方式)延迟15秒释疑
年前在做嵌入式组态时,有一个组态下载功能,该功能就是采用FTP上传功能把组态配置文件上传到触摸屏(WinCE4.2平台,已开FTP服务器)中的.所用到的指令就是WebClient类的UploadFil ...
- 使用阿里云OSS上传文件
本文介绍如何利用Java API操作阿里云OSS对象存储. 1.控制台操作 首先介绍一下阿里云OSS对象存储的一些基本概念. 1.1 进入对象存储界面 登录阿里云账号,进入对象存储界面,如图所示. 进 ...
- AJAX的post请求与上传文件
之前介绍了AJAX的get的请求方式与跨域请求,除此之外AJAX还可以进行异步的post请求,在使用post方式的请求时需要设置请求头,如下: xhr.setRequestHeader("C ...
- layui上传文件请求接口异常_SpringMVC实现文件上传与下载,拦截器,异常处理
第一章:响应数据和结果视图 1. 返回字符串 Controller方法返回字符串可以指定逻辑视图的名称,根据视图解析器为物理视图的地址. @RequestMapping(value="/he ...
- MFC使用http post请求上传文件
文章目录 前言 代码 前言 笔者在Windows编程开发时候,有个上传文件的需求,服务端给的接口是http接口,和网页上面 表单上传文件一样(form-data方式).当然我们拿到这需求,一想 用Wi ...
最新文章
- java椭圆按钮_JAVA按钮重载如何实现椭圆按钮
- php 远程下载图片到本地
- Intel Realsense D435 官方推荐有源USB线(有源电缆 cable)
- 7-28 超市贴花 (5 分)
- 数据库的日常管理经验浅谈
- php截取数组中的字符串,PHP 中使用explode()函数切割字符串为数组的示例
- css-net 中华版,使用C#代码选择CSS样式(ASP.net)
- Nodejs之view中的视图模板之——EJS模板语言,快速入门
- 【效果图】门户网首页模板一 (类似CSDN)
- 相位编码信号 matlab,matlab 求基于相位编码的雷达回波仿真 更多交易加我QQ
- 前端布局 flex布局
- 系统提示 api-ms-win-crt-runtime-l1-1-0.dll文件丢失,解决方法。。。
- 口胡平衡树splay
- 配对交易(一):期货品种相关性研究
- 三星 v版系统更新无法连接到服务器,《异能勇者》万人新服紧急新开 更新最新版领取新服礼遇...
- 【Java】初识泛型(带你从初学者角度切入,通俗易懂,速进)
- 免费天气接口php,360免费天气Api接口(附使用示例)
- Fiddler配合夜神模拟器进行抓包
- 使用VC++通过QQ邮箱发邮件
- AI智能配音助手微信小程序源码支持多种声音场景选择