标签:UseUrls 20 string 自做 builder protected using Blazor app
接上篇 Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (2)
7. 使用配置文件指定监听地址
打开 appsettings.json
文件,加入一行
"UseUrls": "http://localhost:8000;http://0.0.0.0:8000;",
完整文件如下
{
"UseUrls": "http://localhost:8000;http://0.0.0.0:8000;", //加入这句
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*"
}
打开Program.cs文件,在 var builder = WebApplication.CreateBuilder(args);
之后加入一句 builder.WebHost.UseUrls(builder.Configuration["UseUrls"]);
完整Program.cs代码
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using BlazorFileUpload.Data;
using Microsoft.Extensions.FileProviders;
using System.Text.Encodings.Web;
var builder = WebApplication.CreateBuilder(args);
builder.WebHost.UseUrls(builder.Configuration["UseUrls"]); //加入这句
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
//设置文件上传的大小限制 , 默认值128MB
builder.Services.Configure<FormOptions>(options =>
{
options.MultipartBodyLengthLimit = long.MaxValue;
});
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
var dir = Path.Combine(app.Environment.WebRootPath, "Upload");
if (!Directory.Exists(dir)) Directory.CreateDirectory(dir);
var opt = new DirectoryBrowserOptions
{
FileProvider = new PhysicalFileProvider(dir),
Formatter = new AME.HtmlDirectoryFormatterChsSorted(HtmlEncoder.Default),
RequestPath = new PathString("/Upload")
};
app.UseDirectoryBrowser(opt);
app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.Run();
8. 一些锦上添花的小处理
获取本机IP,生成外部链接按钮分发复制给移动设备用. 脑洞一下可以扩展二维码扫码上传等功能.
LocalIP.cs
using System.Net;
using System.Net.Sockets;
namespace BlazorFileUpload
{
public class LocalIP
{
public static string GetLocalIp()
{
//得到本机名
string hostname = Dns.GetHostName();
//解析主机名称或IP地址的system.net.iphostentry实例。
IPHostEntry localhost = Dns.GetHostEntry(hostname);
if (localhost != null)
{
foreach (IPAddress item in localhost.AddressList)
{
//判断是否是内网IPv4地址
if (item.AddressFamily == AddressFamily.InterNetwork)
{
return item.MapToIPv4().ToString();
}
}
}
return "0.0.0.0";
}
}
}
获取本机局域网IP string? ip = LocalIP.GetLocalIp();
从配置文件分离端口号 string? port = Config!["UseUrls"].ToString().Split(';')[0].Split(':')[2];
Index.razor 添加外部地址按钮
<a class="btn btn-primary" href="@($"http://{ip}:{port}")" target="_blank">
<span class="oi oi-browser" aria-hidden="true"></span> 外部地址
</a>
完整Index.razor代码
@page "/"
<PageTitle>BlazorFileUpload</PageTitle>
<div>
上传文件(Max100)
<InputFile OnChange="OnChange" style="max-width:400px" class="form-control" multiple />
</div>
<div style="padding-top:20px">
上传图片
<InputFile OnChange="OnChange" style="max-width: 400px" 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>
<a class="btn btn-primary" href="@($"http://{ip}:{port}")" target="_blank">
<span class="oi oi-browser" aria-hidden="true"></span> 外部地址
</a>
</div>
<pre>
<code>
@uploadstatus
</code>
</pre>
<button class="btn btn-info" @onclick="(()=>help=!help)">说明</button>
@if (help)
{
<pre>
你的IP @ip
<code>
配置:
appsettings.json 文件
自由修改监听ip和端口
"UseUrls": "@Config!["UseUrls"]" //默认 "http://localhost:8000;https://0.0.0.0:8000;"
</code>
</pre>
}
@code{
[Inject] protected Microsoft.AspNetCore.Hosting.IWebHostEnvironment? HostEnvironment { get; set; }
[Inject] protected IConfiguration? Config { get; set; }
protected string UploadPath = "";
protected string? tempfilename = null;
protected bool displayProgress;
protected string? uploadstatus;
long maxFileSize = 1024 * 1024 * 15;
string? ip;
string? port;
bool help;
protected override void OnAfterRender(bool firstRender)
{
if (!firstRender) return;
UploadPath = Path.Combine(HostEnvironment!.WebRootPath, "Upload");
if (!Directory.Exists(UploadPath)) Directory.CreateDirectory(UploadPath);
ip = LocalIP.GetLocalIp();
try
{
port = Config!["UseUrls"].ToString().Split(';')[0].Split(':')[2];
}
catch
{
port = "8000";
}
StateHasChanged();
}
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);
displayProgress = true;
await stream.CopyToAsync(fs);
displayProgress = false;
StateHasChanged();
}
}
9. 写在最后
这个小工程单文件框架依赖打包win-x64平台999KB,压缩分发280KB,香不香.
国内环境有相当大一批人一直不愿意接触 .Net5, .Net6 总守着老的技术不放,不愿意接受新的改变,现在.Net生态环境变得越来越开发越来越顺手,再加上Blazor这个新事物,还有什么可以犹豫的呢?跟着我们一起玩玩Blazor吧!
10. 项目源码
https://github.com/densen2014/Blazor100
https://gitee.com/densen2014/Blazor100
AME.SortedDirectoryChs库
https://gitee.com/densen2014/Densen.Extensions/tree/master/HtmlDirectoryFormatterExtensions
Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (1)
Blazor组件自做九: 用20行代码实现文件上传,浏览目录功能 (2)
AlexChow
今日头条 | 博客园 | 知乎 | Gitee | GitHub
标签:UseUrls,20,string,自做,builder,protected,using,Blazor,app 来源: https://www.cnblogs.com/densen2014/p/16052875.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。