wap网站开发价格,网页页面设计报价,我的家乡网页制作代码,网站建设与维护A卷答案Blazor不得不说真是好东西#xff0c;极大的提升了开发效率#xff0c;很多的页面交互功能基本上只需要写很少的代码就能实现了#xff0c;而且还是无js实现#xff0c;你也绝对没有想到过#xff0c;Blazor实现文件上传是有多么简单#xff01;先说结论#xff1a;Blaz… Blazor不得不说真是好东西极大的提升了开发效率很多的页面交互功能基本上只需要写很少的代码就能实现了而且还是无js实现你也绝对没有想到过Blazor实现文件上传是有多么简单先说结论Blazor实现带进度显示的文件上传真的很简单效果看图实现这么一个小功能仅仅只花了不到50行的代码就实现了接下来就给大家分享下案例实现吧。首先引入Tewr.Blazor.FileReader包这个包能够提供文件上传的流式读取这样便可以实现在服务端对上传文件进行一边上传一遍写文件的操作。配置依赖注入(站长注这是Blazor Server模式wasm方式请查看文末仓库文档说明)services.AddFileReaderService();接下来我们先进行页面布局很简单再声明两个变量用于显示进度和显示图片input typefile/button上传文件/button divif (!string.IsNullOrEmpty(_src)){img src_src width600px /}else{pprogress/p} /div然后在组件中注入IFileReaderService服务using Tewr.Blazor.FileReader inject IFileReaderService fileReaderService;为了让文件框能够和C#代码进行交互所以需要将它通过ElementReference引用起来:input refinputTypeFileElement typefile /button上传文件/button divif (!string.IsNullOrEmpty(_src)){img src_src width600px /}else{pprogress/p} /div code {private ElementReference inputTypeFileElement;private string _src;private string progress; }给按钮绑定事件按钮触发后通过fileReaderService进行文件流的读取接下来便是常规的二进制数据copy操作可以拿到文件的传输进度计算之后便能显示到页面中button onclickReadFile上传文件/buttonpublic 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 refinputTypeFileElement typefile / button onclickReadFile上传文件/button divif (!string.IsNullOrEmpty(_src)){img src_src width600px /}else{pprogress/p} /divcode {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?viewaspnetcore-6.0pivotsserver[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?viewaspnetcore-6.0pivotsserver: https://docs.microsoft.com/zh-cn/aspnet/core/blazor/file-uploads?viewaspnetcore-6.0pivotsserver