asp.net div显示带样式的字符串_Blazor实现文件上传带进度显示案例分享

Blazor不得不说真是好东西，极大的提升了开发效率，很多的页面交互功能基本上只需要写很少的代码就能实现了，而且还是无js实现，你也绝对没有想到过，Blazor实现文件上传是有多么简单！

先说结论：Blazor实现带进度显示的文件上传真的很简单！效果看图：

实现这么一个小功能，仅仅只花了不到50行的代码就实现了，接下来就给大家分享下案例实现吧。

首先引入Tewr.Blazor.FileReader包，这个包能够提供文件上传的流式读取，这样便可以实现在服务端对上传文件进行一边上传一遍写文件的操作。

配置依赖注入

services.AddFileReaderService();

接下来我们先进行页面布局，很简单，再声明两个变量用于显示进度和显示图片

<input type="file"/><button>上传文件</button>
<div>
    @if (!string.IsNullOrEmpty(_src))
    {
        <img src="@_src" width="600px" /&