在布拉泽尔上传文件

几周前, 史蒂夫桑德森博客 关于为原型制片文件输入组件发布包,旨在使Blazor应用程序中的用户提供的文件更轻松。史蒂夫已经提供了 一些非常明确的例子 展示如何在许多方案中使用该组件。但是,缺少,是一个示例,展示了如何使HTTP请求从一列士将文件上传到一些前端服务器 WebAsseMbly应用程序。

本文讨论的BlazorInputfile组件现已迁移为Blazor中的第一类组件(InputFile) 从.NET 5开始.

在前进之前,重要的是要指出基于WASM的海角 仍然在预览中写入,而BlazorInputfile包不超过一个 原型,实际上可能进入一些人的框架 阶段,但可能在这种情况下进行激进的重新设计,如果有史以来会发生这种情况 happens.

如果您想播放,则无需免责声明,您需要创建一个Blazor WebasseMbly应用程序 托管检查核心核心:

海滩 Wasm

安装史蒂夫的 海滩input包 进入客户项目。然后包括参考 index.html. (在 wwwroot.)到了 InputFile.js. file that is included as part of the package using the _content file path:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>海滩WasmTests<title/>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
</head>
<body>
    <app>Loading...</app>
    
    <script src="_content/BlazorInputFile/inputfile.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
    
</body>
</html>

Next, add two using statements to the _imports.razor. 文件制作 component available to the project along with the System.IO namespace:

@using System.IO
@using BlazorInputFile

现在将剃刀组件添加到 页面 文件夹在客户端项目中。 Name it single.rozor. 并用以下内容替换现有代码:

@page "/singlefile"

<h1>Single file</h1>

<p>A single file input that uploads automatically on file selection</p>

<InputFile OnChange="HandleSelection" />

<p>@status</p>

@code {
    string status;

    async Task HandleSelection(IFileListEntry[] files)
    {
        var file = files.FirstOrDefault();
        if (file != null)
        {
            // Just load into .NET memory to show it can be done
            // Alternatively it could be saved to disk, or parsed in memory, or similar
            var ms = new MemoryStream();
            await file.Data.CopyToAsync(ms);

            status = $"Finished loading {file.Size} bytes from {file.Name}";
        }
    }
}

直接从史蒂夫提供的样品直接抬起。如果你运行这个 page (navigating to /singlefile), the file that you select is loaded into a MemoryStream。这就是所有处理代码。进一步处理留给 you.

下一步是创建一个可以接收和处理的端点 上传的文件。将新Web API控制器添加到服务器应用程序和名称 it uploadcontroller.cs.。用以下代码替换内容:

using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System.IO;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorWasmTests.Server.Controllers
{
    [Route("[controller]")]
    [ApiController]
    public class UploadController : ControllerBase
    {
        private readonly IWebHostEnvironment environment;
        public UploadController(IWebHostEnvironment environment)
        {
            this.environment = environment;
        }


        [HttpPost]
        public async Task Post()
        {
            if (HttpContext.Request.Form.Files.Any())
            {
                foreach(var file in HttpContext.Request.Form.Files)
                {
                    var path = Path.Combine(environment.ContentRootPath, "上传", file.FileName);
                    using (var stream = new FileStream(path, FileMode.Create))
                    {
                        await file.CopyToAsync(stream);
                    }
                }
            }
        }
    }
}

该代码应该熟悉任何使用上传文件的人 ASP.NET核心。它检查是否上传了任何文件,如果有的话,他们 保存到名为的文件夹 上传. 所以下一步是创造 上传 文件夹在服务器项目的根目录中。

完成后,修改该代码 singlefile.razor. 注入的文件 instance of the HttpClient service, and use it to post the file:

@page "/singlefile"
@inject HttpClient client
<h1>Single file</h1>

<p>A single file input that uploads automatically on file selection</p>

<InputFile OnChange="HandleSelection" />

<p>@status</p>

@code {
    string status;

    async Task HandleSelection(IFileListEntry[] files)
    {
        var file = files.FirstOrDefault();
        if (file != null)
        {
            // Just load into .NET memory to show it can be done
            // Alternatively it could be saved to disk, or parsed in memory, or similar
            var ms = new MemoryStream();
            await file.Data.CopyToAsync(ms);

            status = $"Finished loading {file.Size} bytes from {file.Name}";
            
            var content = new MultipartFormDataContent {
                { new ByteArrayContent(ms.GetBuffer()), "\"upload\"", file.Name }
            };
            await client.PostAsync("upload", content);
        }
    }
}

The alterations are the second line which injects the HttpClient, and the last 4 lines in the HandleSelection method that create an instance of HttpContent, incorporating the file and post it to the 上传您创建的控制器。

运行此操作时,请确保将服务器项目设置为启动 项目否则路由不太可能正常工作:

启动项目

您应该发现上传的文件保存到上载文件夹。

概括

这个简单的例子显示了如何创建Web API端点以管理处理 上传服务器上的文件,以及发布所需的代码数量最小 来自Blazor客户端应用程序的文件内容到服务器。