ASP.NET Core Blazor WebAssembly 6.x

Create ASP.NET Core Blazor WebAssembly 6.x project with option clent and host checked

1.upload Image and display Image 

图片上传前处理，不借助后端，直接在浏览器上处理，实例通过nuget引用了SixLabors.ImageSharp图像处理工具.

F:\ms\Toolcn\Toolmslycn\Client\Pages\UploadImageAndShow.razor

@*https://mp.weixin.qq.com/s?__biz=MjM5MTc4MDM1MQ==&mid=2651733378&idx=1&sn=430cefb9994dee1e01d9b44b2f6c9c45&chksm=bd4ac1128a3d480453a9724d08f47542bc059f2a4748cb672a5a6c706533914135b9b4a6c0b8&xtrack=1&scene=90&subscene=93&sessionid=1612778674&clicktime=1612779323&enterid=1612779323&ascene=56&devicetype=android-28&version=2700163b&nettype=WIFI&abtest_cookie=AAACAA%3D%3D&lang=zh_CN&exportkey=AzkOwwlm%2FnIl7zWdbVOvwaA%3D&pass_ticket=oEwfbaupO%2BsvF%2FGi5aU%2FQRivFIvDcvnVYMTem5dm2%2F7bSGfxvKQu2vT7nEpPhxJR&wx_header=1*@


<h3>UploadImageAndShow</h3>

@page "/UploadImageAndShow"
@using SixLabors.ImageSharp
@using SixLabors.ImageSharp.Processing
<label class="ant-btn ant-btn-default"><InputFile style="display:none;" OnChange="FileChange"></InputFile>打开图片</label>
<div>
    @if (ImageLoaded)
    {
        <img src="@ImgDataUrl" />
    }
    <br /> @Message
</div>
@code {
    private bool ImageLoaded { get; set; }
    public string Message { get; set; }
    public string ImgDataUrl { get; set; }
    public async Task FileChange(InputFileChangeEventArgs evn)
    {
        try
        {
            //加载图片内容
            var sFile = evn.File.OpenReadStream(1024 * 1024 * 5); //5M限制
            var msInput = new System.IO.MemoryStream();
            await sFile.CopyToAsync(msInput);

            var img = SixLabors.ImageSharp.Image.Load(msInput.ToArray());
            img.Mutate((p) => { p.Resize(200, 200); }); //调整大小
            var fmt = SixLabors.ImageSharp.Formats.Jpeg.JpegFormat.Instance;
            ImgDataUrl = img.ToBase64String(fmt); //data:application/octet-stream;base64, ....
            ImageLoaded = true;
            Message = "图片已处理";
            StateHasChanged();
        }
        catch (Exception err)
        {
            this.Message = err.Message;
        }
    }
}

2.Export Data To Excel using EPPlus

step 1:install "EPPlus" Version="5.5.3"  in Blazor WebAssembly.Client project

step 2:add razor page

F:\ms\Toolmslycn\Toolcn\Client\Pages\ExportDataToExcel.razor

@*come from:https://mp.weixin.qq.com/s?__biz=MjM5MTc4MDM1MQ==&mid=2651733378&idx=1&sn=430cefb9994dee1e01d9b44b2f6c9c45&chksm=bd4ac1128a3d480453a9724d08f47542bc059f2a4748cb672a5a6c706533914135b9b4a6c0b8&xtrack=1&scene=90&subscene=93&sessionid=1612778674&clicktime=1612779323&enterid=1612779323&ascene=56&devicetype=android-28&version=2700163b&nettype=WIFI&abtest_cookie=AAACAA%3D%3D&lang=zh_CN&exportkey=AzkOwwlm%2FnIl7zWdbVOvwaA%3D&pass_ticket=oEwfbaupO%2BsvF%2FGi5aU%2FQRivFIvDcvnVYMTem5dm2%2F7bSGfxvKQu2vT7nEpPhxJR&wx_header=1*@



@page "/ExportDataToExcel"
<h3>导出Excel</h3>
请输入内容：


<input class="form-control" @bind="Content" />

<button class="btn btn-block btn-info" @onclick="ExportToExcel">Save</button>

<br />
@if (CanDownload)
{
    <a download="导出结果.xlsx" href="@DataUrl">下载结果</a>
}
@code {
    public string Content { get; set; }

    private bool CanDownload { get; set; } = false;
    private string DataUrl { get; set; }

    public void ExportToExcel()
    {
        using (var pk = new OfficeOpenXml.ExcelPackage())
        {
            var sheet = pk.Workbook.Worksheets.Add("Data");
            sheet.SetValue("A1", Content);
            var msOutput = new System.IO.MemoryStream();
            pk.SaveAs(msOutput);
            DataUrl = "data:application/octet-stream;base64," + Convert.ToBase64String(msOutput.ToArray());
            CanDownload = true;
            StateHasChanged();
        }
    }
}

How to publish on vultr step by step?

1. Disable trimming for the entire app with the <PublishTrimmed> property in the project file
setting the PublishTrimmed property to false 
<PublishTrimmed>false</PublishTrimmed>

1.dotnet publish -c release .There will be a error

error Message:Optimizing assemblies for size failed. Optimization can be disabled by setting the PublishTrimmed property to false

/usr/share/dotnet/sdk/6.0.100/Sdks/Microsoft.NET.Sdk/targets/Microsoft.NET.ILLink.targets(156,5): error MSB6006: "dotnet" exited with code 137. [/var/www/msly/Toolmslycn/src/Client/Toolmslycn.Client.csproj]
  Optimizing assemblies for size, which may change the behavior of the app. Be sure to test after publishing. See: https://aka.ms/dotnet-illink
/usr/share/dotnet/sdk/6.0.100/Sdks/Microsoft.NET.Sdk/targets/Microsoft.NET.ILLink.targets(109,5): error NETSDK1144: Optimizing assemblies for size failed. Optimization can be disabled by setting the PublishTrimmed property to false. [/var/www/msly/Toolmslycn/src/Client/Toolmslycn.Client.csproj]

s

F:\developer_msly\Toolmslycn\src\Client\Toolmslycn.Client.csproj

Add the following to the .csproj:

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

	<PropertyGroup>
		<TargetFramework>net6.0</TargetFramework>
		<Nullable>enable</Nullable>
		<ImplicitUsings>enable</ImplicitUsings>
	+	<PublishTrimmed>false</PublishTrimmed>
	</PropertyGroup>

Useful links

https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/configure-trimmer?view=aspnetcore-6.0