Blazor入门-文件上传-简单版

本地环境：win10, visual studio 2022 community

效果

点击后：


成功上传后，下方弹出文件信息。（最下方的绘图是解析文件后的结果，不是本文内容，不作赘述）

设计思路

先写好前端的上传控件，然后写OnChange函数，该函数需要使用服务里的函数，将文件保存到指定位置。待服务返回时，再做一些处理（比如弹出提示、展示某些内容等）。

实现

前端

    <div class="row" style="margin-top:1%;">
        <div>
            <label>
                提示信息：@Message
            </label>

            <label>
                选择上传文件：<InputFile OnChange="@LoadFiles" multiple />

            </label>

            @if (isLoading)
            {
                <p>文件上传中......</p>
            }
            else
            {
                <ul>
                    @foreach (var file in loadedFiles)
                    {
                        <li>
                            <ul>
                                <li class="full-width">文件名：@file.Name</li>
                                <li>最后修改时间：@file.LastModified.ToString()</li>
                                <li>文件大小(byte)：@file.Size</li>
                                <li>文件类型：@file.ContentType</li>
                            </ul>
                        </li>

                    }

                </ul>
            }          
        </div>

    </div>

注意：

• blazor里写好的上传元件是InputFile
• 前端代码里可以灵活运用if-else、foreach

然后需要写一点c#代码：

@inject IJSRuntime JsRuntime
@inject IWebHostEnvironment Environ
@inject VectorService vService

@code {
    private List<IBrowserFile> loadedFiles = new();
    private int maxFileSize = 5 * 1024 * 1024;
    private int maxAllowedFiles = 1;
    private bool isLoading;
    private string Message = string.Empty;

    private async Task LoadFiles(InputFileChangeEventArgs e)
    {
        isLoading = true;
        loadedFiles.Clear();
        foreach (var file in e.GetMultipleFiles(maxAllowedFiles))
        {
            try
            {
                loadedFiles.Add(file);
                // 存储到本地
                string result = await VectorService.ProcessFormFile(file, Environ, maxFileSize);
                // 再做其他处理
            }
            catch (Exception ex)
            {
                Message = ex.Message;
            }
        }
        isLoading = false;
    }
    
}

注意：

• 这里写了一个我自定义的VectorService，这个服务是需要注入的，否则会找不到

后端

注入服务

打开Program.cs，添加一句：

builder.Services.AddSingleton<VectorService>();

如图：

然后在Data文件夹下新增一个同名类。

编写服务代码

using Microsoft.AspNetCore.Components.Forms;

namespace BlazorApp1.Data
{
    public class VectorService
    {
        /// <summary>
        /// 上传的文件存储到：项目路径\Development\unsafeUploads
        /// </summary>
        /// <param name="formFile"></param>
        /// <param name="envir"></param>
        /// <param name="maxFileSize">前端的文件大小限制，目前是5MB</param>
        /// <returns></returns>
        public static async Task<string> ProcessFormFile(IBrowserFile formFile, IWebHostEnvironment envir, int maxFileSize) {
            var path = Path.Combine(envir.ContentRootPath, envir.EnvironmentName, "unsafeUploads", formFile.Name);
            using (
                var reader =
                    new FileStream(
                        path,
                        FileMode.Create))
            {
                await formFile.OpenReadStream(maxFileSize).CopyToAsync(reader);
            }
            // 可以做一些别的操作。。随便。。
            
            return string.Empty;
        }

    }
}

注意：

• 如果在项目路径\Development\unsafeUploads找不到上传的文件，那可能是根本没有这个路径。新建一个就好。

tricks

控制某个元素的展示与隐藏

比如我有一个按钮，id是exportBtnDiv，一开始这个按钮是隐藏的，在某些特殊时候需要展示，那么可以先写一段js代码：

<script>
    function showExportBtn() {
        document.getElementById('exportBtnDiv').style.display = 'block';
    }
</script>

在需要展示时，写：

await JsRuntime.InvokeAsync<object>("showExportBtn");

其中JsRuntime是：

@inject IJSRuntime JsRuntime